8000 Adding a Chrome Extension Auth sample. · dendisuhubdy/quickstart-js@9e0c8c0 · GitHub
[go: up one dir, main page]
Skip to content

Commit 9e0c8c0

Browse files
author
Nicolas Garnier
committed
Adding a Chrome Extension Auth sample.
Change-Id: I53d4de02da0e512d63ec2fa893ef884aea7f7f2a
1 parent cdffb60 commit 9e0c8c0

File tree

7 files changed

+282
-0
lines changed

7 files changed

+282
-0
lines changed

‎auth/chromextension/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
Firebase Auth w/ Chrome Extensions Quickstart
2+
=============================================
3+
4+
This sample shows how to authorize Firebase in a Chrome extension using a Google account.
5+
6+
Introduction
7+
------------
8+
9+
- [Read more about Firebase Auth](https://firebase.google.com/docs/auth/)
10+
11+
Getting Started
12+
---------------
13+
14+
- Create a Firebase project using the [Firebase Console](https://console.firebase.google.com).
15+
- Create a new OAuth Client ID in your project's [Developers Console](https://console.developers.google.com/apis/credentials/oauthclient?project=_), Select **Chrome App** and enter your Chrome Extension/App ID.
16+
- In your project's Firebase Console, enable the **Google** authentication method in the **Auth** section > **SIGN IN METHOD** tab.
17+
- Add the Client ID you created to the whitelist using the **Whitelist client IDs from external projects (optional)**
18+
- Edit the `credential.js` and enter your project's identifiers you get from the Firebase Console **Overview > Add Firebase to your web app**.
19+
- Edit the `manifest.json` and enter your **Client ID** and your extension's **Public Key**. Also make sure you remove all comment lines (starting with `//`) in the `manifest.json` file before deploying your extension online.
20+
- Install the Extension in your browser and click on the extension's icon once installed. The first time your users will install the extension they will have to authorize Firebase using the login button.
21+
22+
Feel free to try out a deployed version of the Chrome Extension directly: https://chrome.google.com/webstore/detail/lpgchdfbjddonaolofeijjackhnhnlla
23+
24+
25+
Support
26+
-------
27+
28+
https://firebase.google.com/support/
29+
30+
License
31+
-------
32+
33+
© Google, 2016. Licensed under an [Apache-2](../../LICENSE) license.

‎auth/chromextension/credentials.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<!--
3+
Copyright (c) 2016 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+
<!--
22+
Note that Google Sign In does not work from a file URL. You will need to make
23+
this page available from a web server, either from localhost or using Firebase
24+
Hosting.
25+
26+
Whichever domain it is running on, you'll have to add the origin for that domain
27+
in the Google Developer Console: https://console.developers.google.com, search
28+
for Credentials and create a new credential > OAuth client ID > web application,
29+
and set the domain as an authorised origin (e.g. http://localhost:8000 or https://foo.bar).
30+
-->
31+
<title>Google Sign In in Chrome Extensions Example</title>
32+
33+
<link rel="stylesheet" href="main.css">
34+
35+
<!-- Firebase -->
36+
<!-- ***********************************************************************************************************************
37+
* TODO(DEVELOPER): Paste the initialization snippet from: Firebase Console > Overview > Add Firebase to your web app. *
38+
*********************************************************************************************************************** -->
39+
40+
<!-- Firebase JS -->
41+
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
42+
<script src="credentials.js"></script>
43+
</head>
44+
<body>
45+
<h3>Firebase Authentication</h3>
46+
47+
<div class="quickstart-user-details-container">
48+
<button disabled id="quickstart-button">Sign-in with Google</button>
49+
<p>
50+
Firebase sign-in status: <span id="quickstart-sign-in-status">Unknown</span>
51+
<div>Firebase auth <code>currentUser</code> object value:</div>
52+
<pre><code id="quickstart-account-details">null</code></pre>
53+
</p>
54+
</div>
55+
</body>
56+
</html>

‎auth/chromextension/credentials.js

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// TODO(DEVELOPER): Change the values below using values from the initialization snippet: Firebase Console > Overview > Add Firebase to your web app.
2+
// Initialize Firebase
3+
var config = {
4+
apiKey: "<YOUR_API_KEY>",
5+
databaseURL: "<YOUR_DATABASE_URL>",
6+
storageBucket: "<YOUR_STORAGE_BUCKET_NAME>"
7+
};
8+
firebase.initializeApp(config);
9+
10+
/**
11+
* initApp handles setting up the Firebase context and registering
12+
* callbacks for the auth status.
13+
*
14+
* The core initialization is in firebase.App - this is the glue class
15+
* which stores configuration. We provide an app name here to allow
16+
* distinguishing multiple app instances.
17+
*
18+
* This method also registers a listener with firebase.auth().onAuthStateChanged.
19+
* This listener is called when the user is signed in or out, and that
20+
* is where we update the UI.
21+
*
22+
* When signed in, we also authenticate to the Firebase Realtime Database.
23+
*/
24+
function initApp() {
25+
// Listen for auth state changes.
26+
// [START authstatelistener]
27+
firebase.auth().onAuthStateChanged(function(user) {
28+
if (user) {
29+
// User is signed in.
30+
var displayName = user.displayName;
31+
var email = user.email;
32+
var emailVerified = user.emailVerified;
33+
var photoURL = user.photoURL;
34+
var isAnonymous = user.isAnonymous;
35+
var uid = user.uid;
36+
var refreshToken = user.refreshToken;
37+
var providerData = user.providerData;
38+
// [START_EXCLUDE]
39+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed in';
40+
document.getElementById('quickstart-account-details').textContent = JSON.stringify({
41+
displayName: displayName,
42+
email: email,
43+
emailVerified: emailVerified,
44+
photoURL: photoURL,
45+
isAnonymous: isAnonymous,
46+
uid: uid,
47+
refreshToken: refreshToken,
48+
providerData: providerData
49+
}, null, ' ');
50+
// [END_EXCLUDE]
51+
} else {
52+
// Let's try to get a Google auth token programmatically.
53+
startAuth(false);
54+
// [START_EXCLUDE]
55+
document.getElementById('quickstart-sign-in-status').textContent = 'Signed out';
56+
document.getElementById('quickstart-account-details').textContent = 'null';
57+
// [END_EXCLUDE]
58+
}
59+
});
60+
// [END authstatelistener]
61+
62+
document.getElementById('quickstart-button').addEventListener('click', startSignIn, false);
63+
}
64+
65+
/**
66+
* Start the auth flow and authorizes to Firebase.
67+
* @param{boolean} interactive True if the OAuth flow should request with an interactive mode.
68+
*/
69+
function startAuth(interactive) {
70+
// Request an OAuth token from the Chrome Identity API.
71+
chrome.identity.getAuthToken({ interactive: !!interactive }, function(token) {
72+
if (chrome.runtime.lastError && !interactive) {
73+
console.log('It was not possible to get a token programmatically.');
74+
// Show the sign-in button
75+
document.getElementById('quickstart-button').disabled = false;
76+
} else if(chrome.runtime.lastError) {
77+
console.error(chrome.runtime.lastError);
78+
} else if (token) {
79+
// Authrorize Firebase with the OAuth Access Token.
80+
var credential = firebase.auth.GoogleAuthProvider.credential(null, token);
81+
firebase.auth().signInWithCredential(credential).catch(function(error) {
82+
// The OAuth token might have been invalidated. Lets' remove it from cache.
83+
if (error.code === 'auth/invalid-credential') {
84+
chrome.identity.removeCachedAuthToken({token: token}, function() {
85+
startAuth(interactive);
86+
});
87+
}
88+
});
89+
} else {
90+
console.error('The OAuth Token was null');
91+
}
92+
});
93+
}
94+
95+
/**
96+
* Starts the sign-in process.
97+
*/
98+
function startSignIn() {
99+
document.getElementById('quickstart-button').disabled = true;
100+
startAuth(true);
101+
}
102+
103+
window.onload = function() {
104+
initApp();
105+
};

‎auth/chromextension/firebase-logo.png

3.46 KB
Loading

‎auth/chromextension/firebase.png

10.5 KB
Loading

‎auth/chromextension/main.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/**
2+
* Copyright 2015 Google Inc. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
html, body {
18+
font-family: 'Roboto', 'Helvetica', sans-serif;
19+
}
20+
body {
21+
width: 400px;
22+
min-height: 400px;
23+
margin: 0;
24+
padding: 5px;
25+
}
26+
a {
27+
text-decoration: none;
28+
}
29+
li a {
30+
text-decoration: underline;
31+
color: #0288d1;
32+
}
33+
.mdl-grid {
34+
max-width: 1024px;
35+
margin: auto;
36+
}
37+
.mdl-layout__header-row {
38+
padding: 0;
39+
}
40+
.quickstart-user-details-container {
41+
margin-top: 20px;
42+
line-height: 25px;
43+
}
44+
#quickstart-sign-in-status {
45+
font-weight: bold;
46+
}
47+
pre {
48+
overflow-x: scroll;
49+
line-height: 18px;
50+
}
51+
code {
52+
white-space: pre-wrap;
53+
word-break: break-all;
54+
}
55+
h3 {
56+
background: url('firebase-logo.png') no-repeat;
57+
background-size: 40px;
58+
padding-left: 50px;
59+
line-height: 40px;
60+
}

‎auth/chromextension/manifest.json

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"manifest_version": 2,
3+
"name": "Firebase Auth in Chrome Extension Sample",
4+
"description": "This sample shows how to authorize Firebase in a Chrome extension using a Google account.",
5+
"version": "2.0",
6+
"icons": {
7+
"128": "firebase.png"
8+
},
9+
"browser_action": {
10+
"default_icon": "firebase.png",
11+
"default_popup": "credentials.html"
12+
},
13+
"permissions": [
14+
"identity"
15+
],
16+
// Adding https://www.gstatic.com/ to the external scripts authorized domains so we can import the firebase JS SDK.
17+
"content_security_policy":"script-src 'self' https://www.gstatic.com/; object-src 'self'",
18+
"oauth2": {
19+
// TODO(DEVELOPER): Change the line below to the OAuth Client ID you created as described in https://developer.chrome.com/apps/app_identity#google
20+
"client_id": "<YOUR_CLIENT_ID>",
21+
"scopes": [
22+
"https://www.googleapis.com/auth/userinfo.email",
23+
"https://www.googleapis.com/auth/userinfo.profile"
24+
]
25+
},
26+
// TODO(DEVELOPER): Change the line below to your Chrome Extension's public key as described in https://developer.chrome.com/apps/app_identity#google
27+
"key": "<YOUR_EXTENSION_PUBLIC_KEY>"
28+
}

0 commit comments

Comments
 (0)
0