Skip to content

Commit 1496261

Browse files
exaby73exaby73
committed
migrated microsoft-popup.html
1 parent d1eace0 commit 1496261

File tree

2 files changed

+173
-135
lines changed

2 files changed

+173
-135
lines changed

‎auth/microsoft-popup.html‎

Lines changed: 72 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<!--
33
Copyright (c) 2019 Google Inc.
44
@@ -15,142 +15,79 @@
1515
limitations under the License.
1616
-->
1717
<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/9.22.1/firebase-app-compat.js"></script>
34-
<script src="/__/firebase/9.22.1/firebase-auth-compat.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-
function toggleSignIn() {
43-
if (!firebase.auth().currentUser) {
44-
var provider = new firebase.auth.OAuthProvider('microsoft.com');
45-
46-
provider.addScope('User.Read');
47-
firebase.auth().signInWithPopup(provider).then(function(result) {
48-
// This gives you a Microsoft Access Token. You can use it to access the Microsoft API.
49-
var token = result.credential.accessToken;
50-
// You can also retrieve the OAuth ID token.
51-
var idToken = result.credential.idToken;
52-
// The signed-in user info.
53-
var user = result.user;
54-
document.getElementById('quickstart-oauthtoken').textContent = token;
55-
}).catch(function(error) {
56-
// Handle Errors here.
57-
var errorCode = error.code;
58-
var errorMessage = error.message;
59-
// The email of the user's account used.
60-
var email = error.email;
61-
// The firebase.auth.AuthCredential type that was used.
62-
var credential = error.credential;
63-
if (errorCode === 'auth/account-exists-with-different-credential') {
64-
alert('You have already signed up with a different auth provider for that email.');
65-
// If you are using multiple auth providers on your app you should handle linking
66-
// the user's accounts here.
67-
} else {
68-
console.error(error);
69-
}
70-
});
71-
} else {
72-
firebase.auth().signOut();
73-
}
74-
document.getElementById('quickstart-sign-in').disabled = true;
75-
}
76-
77-
/**
78-
* initApp handles setting up UI event listeners and registering Firebase auth listeners:
79-
* - firebase.auth().onAuthStateChanged: This listener is called when the user is signed in or
80-
* out, and that is where we update the UI.
81-
*/
82-
function initApp() {
83-
// Listening for auth state changes.
84-
firebase.auth().onAuthStateChanged(function(user) {
85-
if (user) {
86-
// User is signed in. Note that unlike other providers supported by Firebase Auth, Microsoft does
87-
// not provide a profile photo so user.photoURL will be null. However, it can be queried using
88-
// the Microsoft Graph API: https://docs.microsoft.com/en-us/graph/api/profilephoto-get
89-
var displayName = user.displayName;
90-
var email = user.email;
91-
var emailVerified = user.emailVerified;
92-
var isAnonymous = user.isAnonymous;
93-
var uid = user.uid;
94-
var providerData = user.providerData;
95-
document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
96-
document.getElementById('quickstart-sign-in').textContent = 'Log out';
97-
document.getElementById('quickstart-account-details').textContent = JSON.stringify(user, null, ' ');
98-
} else {
99-
// User is signed out.
100-
document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
101-
document.getElementById('quickstart-sign-in').textContent = 'Log in with Microsoft';
102-
document.getElementById('quickstart-account-details').textContent = 'null';
103-
document.getElementById('quickstart-oauthtoken').textContent = 'null';
104-
}
105-
document.getElementById('quickstart-sign-in').disabled = false;
106-
});
107-
108-
document.getElementById('quickstart-sign-in').addEventListener('click', toggleSignIn, false);
109-
}
110-
111-
window.onload = function() {
112-
initApp();
113-
};
114-
</script>
115-
</head>
116-
<body>
117-
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
118-
119-
<!-- Header section containing title -->
120-
<header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
121-
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
122-
<div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop">
123-
<a href="/"><h3>Firebase Authentication</h3></a>
124-
</div>
125-
</div>
126-
</header>
127-
128-
<main class="mdl-layout__content mdl-color--grey-100">
129-
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
130-
131-
<!-- Container for the demo -->
132-
<div class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
133-
<div class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white">
134-
<h2 class="mdl-card__title-text">Microsoft Authentication with Popup</h2>
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
25+
rel="stylesheet"
26+
href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"
27+
/>
28+
<link
29+
rel="stylesheet"
30+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
31+
/>
32+
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
33+
34+
<link rel="stylesheet" href="main.css" />
35+
</head>
36+
<body>
37+
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
38+
<!-- Header section containing title -->
39+
<header
40+
class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700"
41+
>
42+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
43+
<div
44+
class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--8-col-desktop"
45+
>
46+
<a href="/"><h3>Firebase Authentication</h3></a>
47+
</div>
13548
</div>
136-
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
137-
<p>Log in with your Microsoft account below.</p>
138-
139-
<!-- Button that handles sign-in/sign-out -->
140-
<button disabled class="mdl-button mdl-js-button mdl-button--raised" id="quickstart-sign-in">Log in with Microsoft</button>
141-
142-
<!-- Container where we'll display the user details -->
143-
<div class="quickstart-user-details-container">
144-
Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
145-
<div>Firebase auth <code>currentUser</code> object value:</div>
146-
<pre><code id="quickstart-account-details">null</code></pre>
147-
<div>Microsoft OAuth Access Token:</div>
148-
<pre><code id="quickstart-oauthtoken">null</code></pre>
49+
</header>
50+
51+
<main class="mdl-layout__content mdl-color--grey-100">
52+
<div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
53+
<!-- Container for the demo -->
54+
<div
55+
class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"
56+
>
57+
<div
58+
class="mdl-card__title mdl-color--light-blue-600 mdl-color-text--white"
59+
>
60+
<h2 class="mdl-card__title-text">
61+
Microsoft Authentication with Popup
62+
</h2>
63+
</div>
64+
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
65+
<p>Log in with your Microsoft account below.</p>
66+
67+
<!-- Button that handles sign-in/sign-out -->
68+
<button
69+
disabled
70+
class="mdl-button mdl-js-button mdl-button--raised"
71+
id="quickstart-sign-in"
72+
>
73+
Log in with Microsoft
74+
</button>
75+
76+
<!-- Container where we'll display the user details -->
77+
<div class="quickstart-user-details-container">
78+
Firebase sign-in status:
79+
<span id="quickstart-sign-in-status">Unknown</span>
80+
<div>Firebase auth <code>currentUser</code> object value:</div>
81+
<pre><code id="quickstart-account-details">null</code></pre>
82+
<div>Microsoft OAuth Access Token:</div>
83+
<pre><code id="quickstart-oauthtoken">null</code></pre>
84+
</div>
85+
</div>
14986
</div>
15087
</div>
151-
</div>
88+
</main>
15289
</div>
153-
</main>
154-
</div>
155-
</body>
90+
91+
<script type="module" src="microsoft-popup.ts"></script>
92+
</body>
15693
</html>

‎auth/microsoft-popup.ts‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import { initializeApp } from 'firebase/app';
2+
import {
3+
OAuthProvider,
4+
connectAuthEmulator,
5+
getAuth,
6+
onAuthStateChanged,
7+
signInWithPopup,
8+
signOut,
9+
} from 'firebase/auth';
10+
import { firebaseConfig } from '../config';
11+
12+
initializeApp(firebaseConfig);
13+
14+
const auth = getAuth();
15+
16+
if (window.location.hostname === 'localhost') {
17+
connectAuthEmulator(auth, 'http://127.0.0.1:9099');
18+
}
19+
20+
const signInButton = document.getElementById(
21+
'quickstart-sign-in',
22+
)! as HTMLButtonElement;
23+
const oauthToken = document.getElementById(
24+
'quickstart-oauthtoken',
25+
)! as HTMLDivElement;
26+
const signInStatus = document.getElementById(
27+
'quickstart-sign-in-status',
28+
)! as HTMLSpanElement;
29+
const accountDetails = document.getElementById(
30+
'quickstart-account-details',
31+
)! as HTMLDivElement;
32+
33+
/**
34+
* Function called when clicking the Login/Logout button.
35+
*/
36+
function toggleSignIn() {
37+
if (!auth.currentUser) {
38+
const provider = new OAuthProvider('microsoft.com');
39+
40+
provider.addScope('User.Read');
41+
signInWithPopup(auth, provider)
42+
.then(function (result) {
43+
const credential = OAuthProvider.credentialFromResult(result);
44+
// This gives you a Microsoft Access Token. You can use it to access the Microsoft API.
45+
const token = credential?.accessToken;
46+
// You can also retrieve the OAuth ID token.
47+
const idToken = credential?.idToken;
48+
// The signed-in user info.
49+
const user = result.user;
50+
oauthToken.textContent = token ?? '';
51+
})
52+
.catch(function (error) {
53+
// Handle Errors here.
54+
const errorCode = error.code;
55+
const errorMessage = error.message;
56+
// The email of the user's account used.
57+
const email = error.email;
58+
// The AuthCredential type that was used.
59+
const credential = error.credential;
60+
if (errorCode === 'auth/account-exists-with-different-credential') {
61+
alert(
62+
'You have already signed up with a different auth provider for that email.',
63+
);
64+
// If you are using multiple auth providers on your app you should handle linking
65+
// the user's accounts here.
66+
} else {
67+
console.error(error);
68+
}
69+
});
70+
} else {
71+
signOut(auth);
72+
}
73+
signInButton.disabled = true;
74+
}
75+
76+
// Listening for auth state changes.
77+
onAuthStateChanged(auth, function (user) {
78+
if (user) {
79+
// User is signed in. Note that unlike other providers supported by Firebase Auth, Microsoft does
80+
// not provide a profile photo so user.photoURL will be null. However, it can be queried using
81+
// the Microsoft Graph API: https://docs.microsoft.com/en-us/graph/api/profilephoto-get
82+
const displayName = user.displayName;
83+
const email = user.email;
84+
const emailVerified = user.emailVerified;
85+
const isAnonymous = user.isAnonymous;
86+
const uid = user.uid;
87+
const providerData = user.providerData;
88+
signInStatus.textContent = 'Signed in';
89+
signInButton.textContent = 'Log out';
90+
accountDetails.textContent = JSON.stringify(user, null, ' ');
91+
} else {
92+
// User is signed out.
93+
signInStatus.textContent = 'Signed out';
94+
signInButton.textContent = 'Log in with Microsoft';
95+
accountDetails.textContent = 'null';
96+
oauthToken.textContent = 'null';
97+
}
98+
signInButton.disabled = false;
99+
});
100+
101+
signInButton.addEventListener('click', toggleSignIn, false);

0 commit comments

Comments
 (0)