10000 Merge pull request #300 from firebase/add-microsoft-oauth-examples · rchamorro/quickstart-js@b1cab67 · GitHub
[go: up one dir, main page]
Skip to content

Commit b1cab67

Browse files
bojeil-googlebojeil-google
authored
Merge pull request firebase#300 from firebase/add-microsoft-oauth-examples
Add microsoft oauth examples
2 parents 9f9f4fa + b88a2b2 commit b1cab67

File tree

5 files changed

+373
-1
lines changed

5 files changed

+373
-1
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ Samples are organized into the following subdirectories and include README.md fi
2020
- Google auth using Firebase redirect
2121
- Twitter auth using Firebase popup
2222
- Twitter auth using Firebase redirect
23+
- Microsoft auth using Firebase popup
24+
- Microsoft auth using Firebase redirect
2325
- GitHub auth using Firebase popup
2426
- GitHub auth using Firebase redirect
2527
- [Database](database/README.md)

‎auth/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ The Firebase Auth quickstart demonstrates several methods for signing in:
88
- The Firebase phone number authentication quickstart demonstrates using Firebase phone number authentication using three different techniques: with a [visible ReCaptcha](phone.html), an [invisible ReCaptcha](phone-invisible.html) and a [simplified popup flow](phone-simple.html) (not recommended for production apps).
99
- The Firebase Google Sign in quickstarts demonstrate using a Google account to authenticate to Firebase using three different techniques: with a [popup](google-popup.html), a [redirect](google-redirect.html) and an [auth token](google-credentials.html).
1010
- The Firebase Facebook Login quickstarts demonstrate using a Facebook account to authenticate to Firebase using three different techniques: with a [popup](facebook-popup.html), a [redirect](facebook-redirect.html) and an [auth token](facebook-credentials.html).
11-
- The Firebase GitHub Login quickstarts demonstrate using a GitHub account to authenticate to Firebase using two different techniques: with a [popup](github-popup.html) and a [redirect](github-redirect.html).
1211
- The Firebase Twitter Login quickstarts demonstrate using a Twitter account to authenticate to Firebase using two different techniques: with a [popup](twitter-popup.html) and a [redirect](twitter-redirect.html).
12+
- The Firebase Microsoft Login quickstarts demonstrate using a Microsoft account to authenticate to Firebase using two different techniques: with a [popup](microsoft-popup.html) and a [redirect](microsoft-redirect.html).
13+
- The Firebase GitHub Login quickstarts demonstrate using a GitHub account to authenticate to Firebase using two different techniques: with a [popup](github-popup.html) and a [redirect](github-redirect.html).
1314
- The [Firebase Anonymous auth quickstart](anon.html) demonstrates how to authenticate to Firebase anonymously.
1415
- The [Firebase custom auth quickstart](customauth.html) demonstrates how to authenticate to Firebase with a user who has been authenticated from your own pre-existing authentication system. This is done by generating a token in a specific format, which is signed using the private key from a service account downloaded from the Google Developer Console. This token can then be passed to your client application which uses it to authenticate to Firebase. We provide an [example token generator](exampletokengenerator/auth.html) for demonstration purposes. Note: Generating tokens in production should be done server side.
1516

‎auth/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@ <h2 class="mdl-card__title-text">Table of Content</h2>
7474
<li><a href="twitter-popup.html">Twitter sign-in using Popup</a></li>
7575
<li><a href="twitter-redirect.html">Twitter sign-in using Redirect</a><br><br></li>
7676

77+
<li><a href="microsoft-popup.html">Microsoft sign-in using Popup</a></li>
78+
<li><a href="microsoft-redirect.html">Microsoft sign-in using Redirect</a><br><br></li>
79+
7780
<li><a href="github-popup.html">GitHub sign-in using Popup</a></li>
7881
<li><a href="github-redirect.html">GitHub sign-in using Redirect</a></li>
7982
</ul>

‎auth/microsoft-popup.html

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright (c) 2019 Google Inc.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<html>
18+
<head>
19+
<meta charset=utf-8 />
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21+
<title>Microsoft Sign In Example</title>
22+
23+
<!-- Material Design Theming -->
24+
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
25+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
26+
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
27+
28+
<link rel="stylesheet" href="main.css">
29+
30+
<!-- Import and configure the Firebase SDK -->
31+
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
32+
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
33+
<script src="/__/firebase/5.0.0/firebase-app.js"></script>
34+
<script src="/__/firebase/5.0.0/firebase-auth.js"></script>
35+
<script src="/__/firebase/init.js"></script>
36+
37+
<script type="text/javascript">
38+
39+
/**
40+
* Function called when clicking the Login/Logout button.
41+
*/
42+
// [START buttoncallback]
43+
function toggleSignIn() {
44+
if (!firebase.auth().currentUser) {
45+
// [START createprovider]
46+
var provider = new firebase.auth.OAuthProvider('microsoft.com');
47+
// [END createprovider]
48+
49+
// [START addscopes]
50+
provider.addScope('User.Read');
51+
// [END addscopes]
52+
// [START signin]
53+
firebase.auth().signInWithPopup(provider).then(function(result) {
54+
// This gives you a Microsoft Access Token. You can use it to access the Microsoft API.
55+
var token = result.credential.accessToken;
56+
// The signed-in user info.
57+
var user = result.user;
58+
// [START_EXCLUDE]
59+
document.getElementById('quickstart-oauthtoken').textContent = token;
60+
// [END_EXCLUDE]
61+
}).catch(function(error) {
62+
// Handle Errors here.
63+
var errorCode = error.code;
64+
var errorMessage = error.message;
65+
// The email of the user's account used.
66+
var email = error.email;
67+
// The firebase.auth.AuthCredential type that was used.
68+
var credential = error.credential;
69+
// [START_EXCLUDE]
70+
if (errorCode === 'auth/account-exists-with-different-credential') {
71+
alert('You have already signed up with a different auth provider for that email.');
72+
// If you are using multiple auth providers on your app you should handle linking
73+
// the user's accounts here.
74+
} else {
75+
console.error(error);
76+
}
77+
// [END_EXCLUDE]
78+
});
79+
// [END signin]
80+
} else {
81+
// [START signout]
82+
firebase.auth().signOut();
83+
// [END signout]
84+
}
85+
// [START_EXCLUDE]
86+
document.getElementById('quickstart-sign-in').disabled = true;
87+
// [END_EXCLUDE]
88+
}
89+
// [END buttoncallback]
90+
91+
/**
92+
* initApp handles setting up UI event listeners and registering Firebase auth listeners:
93+
* - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
94+
* out, and that is where we update the UI.
95+
*/
96+
function initApp() {
97+
// Listening for auth state changes.
98+
// [START authstatelistener]
99+
firebase.auth().onAuthStateChanged(function(user) {
100+
if (user) {
101+
// User is signed in. Note that unlike other providers supported by Firebase Auth, Microsoft does
102+
// not provide a profile photo so user.photoURL will be null. However, it can be queried using
103+
// the Microsoft Graph API: https://docs.microsoft.com/en-us/graph/api/profilephoto-get
104+
var displayName = user.displayName;
105+
var email = user.email;
106+
var emailVerified = user.emailVerified;
107+
var isAnonymous = user.isAnonymous;
108+
var uid = user.uid;
109+
var providerData = user.providerData;
110+
// [START_EXCLUDE]
111+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
112+
document.getElementById('quickstart-sign-in').textContent = 'Log out';
113+
document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, ' ');
114+
// [END_EXCLUDE]
115+
} else {
116+
// User is signed out.
117+
// [START_EXCLUDE]
118+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
119+
document.getElementById('quickstart-sign-in').textContent = 'Log in with Microsoft';
120+
document.getElementById('quickstart-account-details').textContent = 'null';
121+
document.getElementById('quickstart-oauthtoken').textContent = 'null';
122+
// [END_EXCLUDE]
123+
}
124+
// [START_EXCLUDE]
125+
document.getElementById('quickstart-sign-in').disabled = false;
126+
// [END_EXCLUDE]
127+
});
128+
// [END authstatelistener]
129+
130+
document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
131+
}
132+
133+
window.onload = function() {
134+
initApp();
135+
};
136+
</script>
137+
</head>
138+
<body>
139+
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
140+
141+
<!-- Header section containing title -->
142+
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
143+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
144+
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
145+
<a href="/"><h3>Firebase Authentication</h3></a>
146+
</div>
147+
</div>
148+
</header>
149+
150+
<main class="mdl-layout__content mdl-color--grey-100">
151+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
152+
153+
<!-- Container for the demo -->
154+
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
155+
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
156+
<h2 class="mdl-card__title-text">Microsoft Authentication with Popup</h2>
157+
</div>
158+
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
159+
<p>Log in with your Microsoft account below.</p>
160+
161+
<!-- Button that handles sign-in/sign-out -->
162+
<button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in">Log in with Microsoft</button>
163+
164+
<!-- Container where we'll display the user details -->
165+
<div class="quickstart-user-details-container">
166+
Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
167+
<div>Firebase auth <code>currentUser</code> object value:</div>
168+
<pre><code id="quickstart-account-details">null</code></pre>
169+
<div>Microsoft OAuth Access Token:</div>
170+
<pre><code id="quickstart-oauthtoken">null</code></pre>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
</main>
176+
</div>
177+
</body>
178+
</html>

‎auth/microsoft-redirect.html

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright (c) 2019 Google Inc.
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<html>
18+
<head>
19+
<meta charset=utf-8 />
20+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
21+
<title>Microsoft Sign In Example</title>
22+
23+
<!-- Material Design Theming -->
24+
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
25+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
26+
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
27+
28+
<link rel="stylesheet" href="main.css">
29+
30+
<!-- Import and configure the Firebase SDK -->
31+
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
32+
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
33+
<script src="/__/firebase/5.0.0/firebase-app.js"></script>
34+
<script src="/__/firebase/5.0.0/firebase-auth.js"></script>
35+
<script src="/__/firebase/init.js"></script>
36+
37+
<script type="text/javascript">
38+
39+
/**
40+
* Function called when clicking the Login/Logout button.
41+
*/
42+
// [START buttoncallback]
43+
function toggleSignIn() {
44+
if (!firebase.auth().currentUser) {
45+
// [START createprovider]
46+
var provider = new firebase.auth.OAuthProvider('microsoft.com');
47+
// [END createprovider]
48+
// [START addscopes]
49+
provider.addScope('User.Read');
50+
// [END addscopes]
51+
// [START signin]
52+
firebase.auth().signInWithRedirect(provider);
53+
// [END signin]
54+
} else {
55+
// [START signout]
56+
firebase.auth().signOut();
57+
// [END signout]
58+
}
59+
// [START_EXCLUDE]
60+
document.getElementById('quickstart-sign-in').disabled = true;
61+
// [END_EXCLUDE]
62+
}
63+
// [END buttoncallback]
64+
65+
/**
66+
* initApp handles setting up UI event listeners and registering Firebase auth listeners:
67+
* - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
68+
* out, and that is where we update the UI.
69+
* - firebase.auth().getRedirectResult(): This promise completes when the user gets back from
70+
* the auth redirect flow. It is where you can get the OAuth access token from the IDP.
71+
*/
72+
function initApp() {
73+
// Result from Redirect auth flow.
74+
// [START getidptoken]
75+
firebase.auth().getRedirectResult().then(function(result) {
76+
if (result.credential) {
77+
// This gives you a Microsoft Access Token. You can use it to access the Microsoft API.
78+
var token = result.credential.accessToken;
79+
// [START_EXCLUDE]
80+
document.getElementById('quickstart-oauthtoken').textContent = token;
81+
} else {
82+
document.getElementById('quickstart-oauthtoken').textContent = 'null';
83+
// [END_EXCLUDE]
84+
}
85+
// The signed-in user info.
86+
var user = result.user;
87+
}).catch(function(error) {
88+
// Handle Errors here.
89+
var errorCode = error.code;
90+
var errorMessage = error.message;
91+
// The email of the user's account used.
92+
var email = error.email;
93+
// The firebase.auth.AuthCredential type that was used.
94+
var credential = error.credential;
95+
// [START_EXCLUDE]
96+
if (errorCode === 'auth/account-exists-with-different-credential') {
97+
alert('You have already signed up with a different auth provider for that email.');
98+
// If you are using multiple auth providers on your app you should handle linking
99+
// the user's accounts here.
100+
} else {
101+
console.error(error);
102+
}
103+
// [END_EXCLUDE]
104+
});
105+
// [END getidptoken]
106+
107+
// Listening for auth state changes.
108+
// [START authstatelistener]
109+
firebase.auth().onAuthStateChanged(function(user) {
110+
if (user) {
111+
// User is signed in. Note that unlike other providers supported by Firebase Auth, Microsoft does
112+
// not provide a profile photo so user.photoURL will be null. However, it can be queried using
113+
// the Microsoft Graph API: https://docs.microsoft.com/en-us/graph/api/profilephoto-get
114+
var displayName = user.displayName;
115+
var email = user.email;
116+
var emailVerified = user.emailVerified;
117+
var isAnonymous = user.isAnonymous;
118+
var uid = user.uid;
119+
var providerData = user.providerData;
120+
// [START_EXCLUDE]
121+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
122+
document.getElementById('quickstart-sign-in').textContent = 'Log out';
123+
document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, ' ');
124+
// [END_EXCLUDE]
125+
} else {
126+
// User is signed out.
127+
// [START_EXCLUDE]
128+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
129+
document.getElementById('quickstart-sign-in').textContent = 'Log in with Microsoft';
130+
document.getElementById('quickstart-account-details').textContent = 'null';
131+
document.getElementById('quickstart-oauthtoken').textContent = 'null';
132+
// [END_EXCLUDE]
133+
}
134+
// [START_EXCLUDE]
135+
document.getElementById('quickstart-sign-in').disabled = false;
136+
// [END_EXCLUDE]
137+
});
138+
// [END authstatelistener]
139+
140+
document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
141+
}
142+
143+
window.onload = function() {
144+
initApp();
145+
};
146+
</script>
147+
</head>
148+
<body>
149+
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
150+
151+
<!-- Header section containing title -->
152+
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
153+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
154+
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
155+
<a href="/"><h3>Firebase Authentication</h3></a>
156+
</div>
157+
</div>
158+
</header>
159+
160+
<main class="mdl-layout__content mdl-color--grey-100">
161+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
162+
163+
<!-- Container for the demo -->
164+
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
165+
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
166+
<h2 class="mdl-card__title-text">Microsoft Authentication with Redirect</h2>
167+
</div>
168+
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
169+
<p>Log in with your Microsoft account below.</p>
170+
171+
<!-- Button that handles sign-in/sign-out -->
172+
<button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in">Log in with Microsoft</button>
173+
174+
<!-- Container where we'll display the user details -->
175+
<div class="quickstart-user-details-container">
176+
Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
177+
<div>Firebase auth <code>currentUser</code> object value:</div>
178+
<pre><code id="quickstart-account-details">null</code></pre>
179+
<div>Microsoft OAuth Access Token:</div>
180+
<pre><code id="quickstart-oauthtoken">null</code></pre>
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
</main>
186+
</div>
187+
</body>
188+
</html>

0 commit comments

Comments
 (0)
0