0
votes

After a SAML login I want to gather the user profile picture. Unfortunately that is not in the SAML attribute. I tried to look for a solution and I found that I have to use graph api.

So I tried to use the https://graph.microsoft.com/v1.0/me/photo/$value call.

Before that I needed a Bearer Token

I find that I can call https://login.microsoftonline.com//oauth2/v2.0/token using these parameters in form-data

grant_type=client_credentials
client_id=<the Client Id of my application registered in Azure>
client_secret<the Client secret generated in Azure of my application>
scope=https://graph.microsoft.com/.default

After calling that I get a bearer token successfully. But when I use it in the /photo/$value call I get this error:

{
    "error": {
        "code": "UnknownError",
        "message": "{\"error\":{\"code\":\"NoPermissionsInAccessToken\",\"message\":\"The token contains no permissions, or permissions can not be understood.\",\"innerError\":{\"requestId\":\"zzz\",\"date\":\"2020-11-09T07:22:06\"}}}",
        "innerError": {
            "date": "2020-11-09T07:22:06",
            "request-id": "zzzz",
            "client-request-id": "xxxx"
        }
    }
}

What I'm doing wrong? Is there any other method I can use in Java to get the profile picture?

Thanks a lot in advance

1

1 Answers

0
votes

Please giving both permissions below under application permissions and grant admin consent.

And use GET /users/{id | userPrincipalName}/photo/$value.Please refer to client-creds-grant-flowand auth-code-flow. enter image description here

-----------------UPDATE------------------

a java console app tutorial.

This is an example of a page-only lists ad users.Just put the following access token in var accessToken="your access token***"******;and you can run it.

<html>

    <style>
        .userItem {
          background-color:lightgrey; 
          list-style-type: none;
          margin: 0;
          padding: 0;
        }
        
        .userItem p {
          display: inline-block;
          width:25%
        }

        .LicenseItem {
          background-color: lightgoldenrodyellow;
          margin: 0;
          padding: 0;
          height: 45%;
          overflow: auto;
        }
        
        .LicenseItem p {
          display: inline-block;
          width: 20%;
      
        }
     

        .loadMore {
            background-color: aqua;
            font-style: italic; 
            text-align: center; 
            padding: 15px;
        }
        </style>

    <body>
        <div id="message"></div>
        <div id="userListView">
            <div class="userItem" style="background-color: aqua;font-style: italic;">
                <hr>
                <p> user display name </p>
                <p> user email address </p>
                <p> user principal name </p>  
            </div>
            <div id="userList"></div>
            <div id="loadMore" class="loadmore"></div>
        </div>
    </body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
        var accessToken="your access token*********";
        var ItemView = " <div id='@id' class='userItem'><hr><p id='@id-obj' style='display:none'>@obj</p><p > @displayName </p><p > @mail </p><p > @upn </p></div>"
        function initPage(){
            $("#loadMore").empty();
            $.ajax({
                url: 'https://graph.microsoft.com/v1.0/users?$top=10',
                type: 'get',
                headers: {
                    "Content-type": 'application/json', 
                    "Authorization":"Bearer " + accessToken
                },
                success: function (data) {
                    var userlist = data.value;
                    var nextpageUrl = data['@odata.nextLink'];
                    if(nextpageUrl){
                        $("#loadMore").append("<div onclick='loadMore(\""+ nextpageUrl  +" \")'>load more...</div>");
                    }
                    userlist.forEach(element => {
                        var view = ItemView.replace(/@id/g,element.id).replace("@displayName",element.displayName).replace("@mail",element.mail).replace("@upn",element.userPrincipalName).replace("@obj",JSON.stringify(element));
                        console.log(JSON.stringify(element));

                        $("#userList").append(view);
                    });
                },
                error:function(data){
                    var response = JSON.parse(data.responseText)
                document.getElementById("message").innerHTML="ERROR:" + response.error.message;
                }
            });
        }

        function loadMore(url){

            $.ajax({
                url: url,
                type: 'get',
                headers: {
                    "Content-type": 'application/json', 
                    "Authorization":"Bearer " + accessToken
                },
                success: function (data) {
                    var userlist = data.value;
                    var nextpageUrl = data['@odata.nextLink'];
                    
                    if(nextpageUrl){
                        $("#loadMore").empty();
                        $("#loadMore").append("<div onclick='loadMore(\""+ nextpageUrl  +" \")'>load more...</div>");
                    }
                    userlist.forEach(element => {
                        var view = ItemView.replace(/@id/g,element.id).replace("@displayName",element.displayName).replace("@mail",element.mail).replace("@upn",element.userPrincipalName).replace("@obj",JSON.stringify(element));
                        $("#userList").append(view);
                    });
                },
                error:function(data){
                    var response = JSON.parse(data.responseText)
                    document.getElementById("message").innerHTML="ERROR:" + response.error.message;
                }
            });
        }
        initPage();

    </script>

</html>