Comment créer un compte Microsoft Connexion à mon site Web, similaire à Google?

Question

Je travaille sur un projet web (HTML, CSS, JavaScript, avec back-end en PHP). J'ai réussi à faire fonctionner une connexion Google, en utilisant leur API simple, mais je ne peux pas obtenir l'équivalent de Microsoft pour fonctionner. Les solutions en ligne officielles semblent s'appuyer sur .NET ou PHP Composer. Je vais essayer le compositeur si c'est le seul moyen, mais une méthode JS/PHP pure serait la plus simple. J'ai essayé d'utiliser ce qui suit:

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

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

Le code ci-dessous est le plus proche que je suis venu à une solution de travail. Je peux obtenir une sorte d'identifiant d'utilisateur (qui semble être unique et constant pour chaque utilisateur). Cela pourrait être suffisant pour configurer le système de connexion que je veux, mais ce serait idéal si je pouvais aussi aller chercher leur nom et leur photo de profil.

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

(ce code ne fonctionne pas comme je l'ai collé parce qu'il repose sur le script MSAL à partir du deuxième lien github, et a besoin d'un client d'application ID)

Answer 1

Après avoir obtenu l'accès jeton avec la portée user.read, vous pouvez appeler Microsoft graphique api à get sign-in user's profile information tels que displayName businessPhones:

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

pour obtenir user's profile photo:

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

En outre, si vous utilisez Microsoft Graph JavaScript Client Library en premier lien, vous pourriez obtenir et profil Sélectionnez la photo de l'utilisateur par:

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

S'il vous plaît se référer à un exemple de code here.