MSAL Azure B2C: which field do I send as bearer token to make authorized API requests?-CodePudding

I have React (full-stack Next.js) application which uses Azure B2C with MSAL for authentication. I got the PKCE login flow (just has Google as provider) working and I am calling acquireTokenSilent to acquire token to use for authorizing API calls to the back-end (back-end based on ASP.NET Core to be implemented later).

Which part of the response should be sent as Bearer from the Next.js application to the back-end to Authorize requests and use as user ID in the database?

How I acquire the token can be seen in the following snippet.

const Home: NextPage = () => {
  const { instance, accounts } = useMsal();

  useEffect(() => {
    if (!accounts.length) return;
    instance
      .acquireTokenSilent({
        scopes: [],
        account: accounts[0],
      })
      .then((token) => console.log("token:", token));
  });

  return (
    <div className={styles.container}>
      <button onClick={handleClick(instance)}>login</button>
    </div>
  );
};

export default Home;

This logs out the following response as seen in the snippet below. I have changed the strings to "STRING" for security to be sure as this just for demonstration purposes. The empty strings "" mean the strings are empty from the response.

{
    "authority": "STRING",
    "uniqueId": "STRING",
    "tenantId": "",
    "scopes": [],
    "account": {
        "homeAccountId": "STRING",
        "environment": "STRING",
        "tenantId": "",
        "username": "EMAIL",
        "localAccountId": "STRING",
        "name": "John Doe",
        "idTokenClaims": {
            "exp": "NUMBER",
            "nbf": "NUMBER",
            "ver": "STRING",
            "iss": "STRING",
            "sub": "STRING",
            "aud": "STRING",
            "nonce": "STRING",
            "iat": "NUMBER",
            "auth_time": "NUMBER",
            "idp_access_token": "STRING",
            "name": "STRING",
            "idp": "STRING",
            "oid": "STRING",
            "emails": [
                "STRING"
            ],
            "tfp": "STRING"
        }
    },
    "idToken": "STRING",
    "idTokenClaims": {
        "exp": "NUMBER",
        "nbf": "NUMBER",
        "ver": "STRING",
        "iss": "STRING",
        "sub": "STRING",
        "aud": "STRING",
        "nonce": "STRING",
        "iat": "NUMBER",
        "auth_time": "NUMBER",
        "idp_access_token": "STRING",
        "name": "JOHN DOE",
        "idp": "google.com",
        "oid": "STRING",
        "emails": [
            "EMAIL"
        ],
        "tfp": "STRING"
    },
    "accessToken": "",
    "fromCache": false,
    "expiresOn": null,
    "correlationId": "STRING",
    "familyId": "",
    "tokenType": "",
    "state": "",
    "cloudGraphHostName": "",
    "msGraphHost": "",
    "fromNativeBroker": false
}

CodePudding user response：

I figured it out.

You need to send accessToken as bearer. You can acquire the accessToken by defining scopes. It's important to remember you need the full URI. The mistake I made is defining it as task.write instead of full url as in the following example:

https://contoso.onmicrosoft.com/43o34te-befa-4445-aaaa-bbbbbbbbb/tasks.write