3 API calls to connect to Microsoft Graph API
Tags: azure, graphapi, sso, microsoft
Published: 2021-09-19 13:58:15

If you are like me, reading Microsoft documentation trying to implement Microsoft identity sign in is just nightmare. After precious hours spent flipping and digging down rabbit holes, I had concluded that there are 3 HTTP calls that everyone should try and experiment first for basic understanding before reading the rest of the documentation.

The scenario am explaining here is applicable for public facing web app or services that anyone can register and sign up with, for examples social media or online SaaS websites. As opposed to scenario where an internal company app allowing only their employees to sign in, or scenario where background processing automation jobs needing non-interactive login are not covered here. However once you've understand this article, you will be able to find out how to work on other scenarios on your own easily.

The basic steps are:

1. Register your app with Azure AD
2. Get authorization code
3. Get an access token
4. Call Microsoft Graph with the access token

## App registration
Am not going at length on how to perform this task as you can find many articles on this, but am just going to declare the config used during the registration.

### Registration config
Choose `Personal Microsoft accounts only`.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2n5j61vw3qvwy8lh7hm3.png)
 
### Redirect URI
Just set anything e.g. `https://dev.to`. We will be checking the query string once we are redirected to this URL.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4kyjl41hp7wr9bn9g09.png)
  

Once registered leave the screen as it is because you are going back to it to generate secret key and grabbing client id.

Now let's fire up our postman/insomnia/any rest client you are using and get RESTing!

## Get authorization code
The first URL to be called is `https://login.microsoftonline.com/consumers/oauth2/v2.0/authorize`.
with query strings as below

| Name            | Value                  |
| --------------- | ----------------------:|
| client_id       | `712f78dc-347f-4a1d-ac89-64ba825a8ca6` ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gkzfxkspys3dmdff09j.png)                       |
| response_type   | `code`                   |
| redirect_uri    | `https://dev.to` |
| scope           | `user.read`              |
| response_mode   | `query`              |
| state           | `12345`                  |

You may craft the URL manually in a text editor or just use Insomnnia to generate it. Once you've filled up the key-values in Insomnia, copy the generated URL and paste it in a browser.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gstq09641gnybtpgz4bm.png)

I suggest you use incognito mode so that it will ignore any logged in Microsoft account and display the login screen as below:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mtqndlgpzsm6m79ktqs.png)
Enter your credentials or create new account to login and the consent screen will show up and you can now click Yes.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vztpefbodgjxy6g0ag8z.png)

Finally you'll get redirected to https://dev.to with query string in the URL. Grab the code in the browser's URL bar.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em7msjpfkqp6rslwy0us.png)

Rest of the steps will involve Insomnia solely. 

## Get an access token
Second URL to call is to get the access token.
*URL*: `https://login.microsoftonline.com/consumers/oauth2/v2.0/token`
*Method*: It will be a POST request.
Header: must set`Content-Type:application/x-www-form-urlencoded`.

The form params are as below:
(you may generate the secret in Azure portal now)

| Name            | Value                  |
| --------------- | ----------------------:|
| client_id       | `712f78dc-347f-4a1d-ac89-64ba825a8ca6`|
| client_secret   | `t1R7Q~mfEG1xdhQScpRQ~wkScI_sqlDW9Ri-F` ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en3l64fmypjgo54z9515.png) |
| scope           | `user.read`              |
| redirect_uri    | `https://dev.to` |
| grant_type      | `authorization_code` |
| code            | `M.R3_BAY.19723c8b-2e08-819a-ade4-a8f1a8897886`  Grab this from the previous call       |

Insomnia screenshots
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyow6v5vffrx1bi0up9c.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8iiroh7r4y2basit7j5.png)

Once posted, below is the sample response.
The access_token is the one we are going to use next so grab that lengthy texts!
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hydg28ik10igp0snztqg.png)

## Call Microsoft Graph API
The final URL would be the call to the Graph API itself to get the user profile that has signed in.
URL: `https://graph.microsoft.com/v1.0/me`
Method: The method is GET 
Header: we need to send the Authorization header.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlao8kpembln1ea6vevi.png)
The value of the header must be the word Bearer + the access_token. Example if the access_token was `EwBQA8l6BAAU...`, the Authorization header value will be `Bearer EwBQA8l6BAAU...`.
 
Once you execute the GET request you will receive below sample response:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0akn6qyef0ca9w3efs64.png)
  
That's all folks, give it a try and let me know how it goes!