A react component to implement Microsoft login (via outlook.com, live.com, office365.com). Visit Implement Microsoft login in a react.js app for a detailed write up.
follow the steps mentioned below:
Obtain application Id by registering your app in Microsoft App Dev Center, under the
platforms section, add
web platform and enter the redirect uri, which is the path of an html file residing on your web server. For example
http://localhost:9999/authComplete.html. Content of this html file in mentioned in step 4. Select appropriate scopes from the
Delegated Permissions Section. Keep a note of these.
Install the package via
npm install react-ms-login --save
You can use this component anywhere in your app as shown below:
Based on the
redirectUri you have configured in the Step 1, create the corresponding html file. For example in this case since we have configured redirectUri as
http://localhost:9999/authComplete.html, that means we need
authComplete.html file at the root of the server. You can of course choose any path in your server, just make sure
redirectUri reflects that path correctly.
Content of authComplete.html is shown below.
first script reference points to
authComplete.js, make sure you copy this file from the
dist directory of
react-ms-login package and put it in your server where it's accessible and then change the script src to reflect the path.