如何创建 Microsoft 帐户登录到我的网站，类似于 Google？

Posted 2023-02-23

【中文标题】如何创建 Microsoft 帐户登录到我的网站，类似于 Google？

【英文标题】：How to create Microsoft Account Sign-in to my website, similar to Google?

【发布时间】：2018-02-25 18:34:26

【问题描述】：

我正在开发一个网络项目（html、CSS、javascript，后端使用 php）。我已经使用他们的简单 API 成功地让 Google 登录正常工作，但无法获得与 Microsoft 等效的功能。对此的官方在线解决方案似乎依赖于 .NET 或 PHP Composer。如果这是唯一的方法，我会尝试作曲家，但纯 JS/PHP 方法将是最简单的。 我尝试使用以下内容：

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

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

下面的代码是我找到的最接近有效解决方案的代码。我可以获得某种用户 ID（对于每个用户来说似乎是唯一且不变的）。这可能足以设置我想要的登录系统，但如果我还可以获取他们的姓名和个人资料图片，那将是理想的。

        <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>

（此代码不会像我粘贴的那样运行，因为它依赖于第二个 github 链接中的 MSAL 脚本，并且需要应用程序客户端 ID）

【参考方案1】：

获取user.read范围的访问令牌后，可以调用microsoft graph api到get sign-in user's profile information如displayName、businessPhones：

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

获取user's profile photo：

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

此外，如果您在第一个链接中使用 Microsoft Graph JavaScript 客户端库，您可以通过以下方式获取用户的 displayName 和个人资料照片：

            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);
            );

请参考代码示例here。