How to create Microsoft Account Sign-in to my website, similar to Google?

Question

I'm working on a web project (HTML, CSS, JavaScript, with back-end in PHP). I've successfully got a Google Sign-in working, using their simple API, but can't get the Microsoft equivalent to function. The official online solutions to this seem to rely on .NET or PHP Composer. I'll try composer if that's the only way but a pure JS/PHP method would be easiest. I've tried to use the following:

https://github.com/microsoftgraph/msgraph-sdk-javascript

https://github.com/AzureAD/microsoft-authentication-library-for-js

The code below is the closest I've come to a working solution. I can get some kind of user ID (which appears to be unique and constant for each user). This might be enough to set up the login system I want, but it would be ideal if I could also fetch their name and profile picture.

        <script class="pre">
                var userAgentApplication = new Msal.UserAgentApplication("MY CLIENT ID", null, function (errorDes, token, error, tokenType) {
                        // this callback is called after loginRedirect OR acquireTokenRedirect (not used for loginPopup/aquireTokenPopup)
                    })
                    userAgentApplication.loginPopup(["user.read"]).then(function (token) {
                        var user = userAgentApplication.getUser(); //this is good
                        //user.userIdentifier seems to be a unique ID
                        //I will store this and use it for future verification
                        console.log(user);

                        //START

                        // get an access token
                        userAgentApplication.acquireTokenSilent(["user.read"]).then(function (token) {
                            console.log("ATS promise resolved");
                        }, function (error) {
                            console.log(error);
                            // interaction required
                            if (error.indexOf("interaction_required") != -1) {
                                userAgentApplication.acquireTokenPopup(["user.read"]).then(function (token) {
                                    // success
                                    console.log("s2");
                                }, function (error) {
                                    console.log("e2");
                                    // error
                                });
                            }
                        });

                        //END

                        // signin successful
                    }, function (error) {
                        console.log(error);
                        // handle error
                    });
</script>

(this code won't run as I've pasted it because it relies on the MSAL script from the second github link, and needs an application client ID)

Answer 1

After getting the access token with scope user.read , you could call microsoft graph api to get sign-in user's profile information such as displayName , businessPhones :

https://graph.microsoft.com/v1.0/me
Content-Type:application/json
Authorization:Bearer {token}

To get user's profile photo :

GET https://graph.microsoft.com/v1.0/me/photo/$value

In addition , if you are using Microsoft Graph JavaScript Client Library in first link , you could get user's displayName and profile photo by :

            client
            .api('/me')
            .select("displayName")
            .get((err, res) => {
                if (err) {
                    console.log(err);
                    return;
                }
                console.log(res);
            });
        // Example of downloading the user's profile photo and displaying it in an img tag
        client
            .api('/me/photo/$value')
            .responseType('blob')
            .get((err, res, rawResponse) => {
                if (err) throw err;
                const url = window.URL;
                const blobUrl = url.createObjectURL(rawResponse.xhr.response);
                document.getElementById("profileImg").setAttribute("src", blobUrl);
            });

Please refer to code sample here .