前準備
本稿は、前掲「Firebase で Hosting」を基本にして説明します。
Firebase へのログイン方法は、そちらを参照してください。(少し複雑)
認証スクリプトはウェブアプリにログイン機能を追加する説明に従い、CDN で実装します。(npm は使わない)
このログイン機能を追加する説明にある「ウェブアプリ」とは、Firebase のサーバで公開している Web ページを指します。
(前掲で実行した firebase deploy の実行結果に表示される Hosting URL: https://xxxxxxxx.web.app のこと)
ウェブアプリは Firebase のプロジェクトであり、ログイン機能はプロジェクトに割り当てます。
なので、予め 1 個以上のプロジェクトを作成しておく必要があります。
ウェブアプリに追加する認証
*1すでに何らかの会員制サービスを提供していて、認証機構を外部に提供するサービスを IdP と呼びます。
項目 内容 備考 種類 ソーシャルログイン IdP (Identity provider)*1 プロバイダ
1. ウェブアプリにログイン機能を追加
GUI ブラウザで Firebase コンソールにログインする。
自分のプロジェクトが見えているので、そのひとつをクリックする。
ここでは「project-name (project-name-671ff)」を選択している。
⇓
「Authentication」をクリックする。
⇓
「始める」をクリックする。
既にプロバイダ (IdP: Identity provider) が組み込まれている場合はスキップする。
⇓
タブ「ログイン方法」を選択し「追加のプロバイダ」の「Google」をクリックする。
⇓
「⊂✓有効にする」をクリックしてプロバイダを有効にしてから以下を記入し、 ボタンをクリックする。
• プロジェクトの公開名 (必要が無ければ自動採番のまま)
• プロジェクトのサポートメール
プロジェクトのサポートメールは、当該プロジェクトに登録されているメールアドレスから選択する。
プロジェクトに関係がないメールアドレスを記入することは出来ない。
記入・選択をすると ボタンがクリックできるようになる。
⇓
ログインプロバイダの一覧が表示される。
選択したプロバイダが「 (✓) 有効 」になっていることを確認する。
2. 認証スクリプトの用意
2-1. Firebase にログインする。(Firebase CLI)
$ ./firebase login --no-localhost2-2. 認証スクリプトを記述する。
$ cd ./fb/public/2-3. プライバシーポリシーと利用規約の HTML ファイルをダミーで作成する。
fb/public$ vim index.html
[ index.html ] (init で用意されたファイルを改造して実装)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome to Firebase Hosting</title> <!-- update the version number as needed --> <script src="/__/firebase/11.4.0/firebase-app-compat.js"></script> <!--*2--> <!-- include only the Firebase features as you need --> <script src="/__/firebase/11.4.0/firebase-auth-compat.js"></script> <!--*2--> <script defer src="/__/firebase/11.4.0/firebase-database-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-firestore-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-functions-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-messaging-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-storage-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-analytics-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-remote-config-compat.js"></script> <script defer src="/__/firebase/11.4.0/firebase-performance-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth__ja.js"></script> <!--*3--> <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" /> <!-- initialize the SDK after all desired features are loaded, set useEmulator to false to avoid connecting the SDK to running emulators. --> <script src="/__/firebase/init.js?useEmulator=true"></script> <!--*2--> <style media="screen"> body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } } </style> </head> <body> <!-- 周囲の HTML は FirebaseUI によって変更されません。 アプリでは、その場所をブランディング、コントロール、その他のカスタマイズに使用できます。--> <h1>Welcome to My Awesome App</h1> <div id="firebaseui-auth-container"></div> <div id="loader">Loading...</div> <!-- *4<div id="message"><h2>Welcome</h2><h1>Firebase Hosting Setup Complete</h1><p>You're seeing this because you've successfully setup Firebase Hosting.Now it's time to go build something extraordinary!</p><a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a></div><p id="load">Firebase SDK Loading…</p>--> <script> document.addEventListener('DOMContentLoaded', function() { const loadEl = document.querySelector('#load'); // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 // // The Firebase SDK is initialized and available here! // // firebase.auth().onAuthStateChanged(user => { }); // firebase.database().ref('/path/to/ref').on('value', snapshot => { }); // firebase.firestore().doc('/foo/bar').get().then(() => { }); // firebase.functions().httpsCallable('yourFunction')().then(() => { }); // firebase.messaging().requestPermission().then(() => { }); // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { }); // firebase.analytics(); // call to activate // firebase.analytics().logEvent('tutorial_completed'); // firebase.performance(); // call to activate // // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 try { let app = firebase.app(); let features = [ 'auth', 'database', 'firestore', 'functions', 'messaging', 'storage', 'analytics', 'remoteConfig', 'performance', ].filter(feature => typeof app[feature] === 'function'); loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`; } catch (e) { console.error(e); loadEl.textContent = 'Error loading the Firebase SDK, check the console.'; } });
var uiConfig = { callbacks: { signInSuccessWithAuthResult: function(authResult, redirectUrl) { // User successfully signed in. // Return type determines whether we continue the redirect automatically // or whether we leave that to developer to handle. return true; }, uiShown: function() { // The widget is rendered. // Hide the loader. document.getElementById('loader').style.display = 'none'; } }, // Will use popup for IDP Providers sign-in flow instead of the default, redirect. signInFlow: 'popup', signInSuccessUrl: 'index.html', // ログイン成功時に表示する URL*5 signInOptions: [ // Leave the lines as is for the providers you want to offer your users. firebase.auth.GoogleAuthProvider.PROVIDER_ID, // *6 //firebase.auth.FacebookAuthProvider.PROVIDER_ID,// *6 //firebase.auth.TwitterAuthProvider.PROVIDER_ID,// *6 //firebase.auth.GithubAuthProvider.PROVIDER_ID,// *6 //firebase.auth.EmailAuthProvider.PROVIDER_ID,// *6 //firebase.auth.PhoneAuthProvider.PROVIDER_ID// *6 ], tosUrl: 'tos.html', // Terms of service (利用規約) を表示する URL*7 privacyPolicyUrl: 'privacy.html' // プライバシーポリシーを表示する URL*8 }; // Initialize the FirebaseUI Widget using Firebase. var ui = new firebaseui.auth.AuthUI(firebase.auth()); // The start method will wait until the DOM is loaded. ui.start('#firebaseui-auth-container', uiConfig);
firebase.auth().onAuthStateChanged(user => { if(user != null) { // Signed in. const displayName = user.displayName; const email = user.email; const photoURL = user.photoURL; const emailVerified = user.emailVerified; const uid = user.uid; const html = "" + "<ul>" + `<li>displayName: "${displayName}"</li>` + `<li>email: "${email}"</li>` + `<li>photoURL: "${photoURL}"</li>` + `<li>emailVerified: "${emailVerified}"</li>` + `<li>uid: "${uid}"</li>` + "</ul>" + "<button type=submit onClick=doLogout()>ログアウト</button>" // 下記 doLogout() を呼び出すボタン ; document.getElementById('firebaseui-auth-container').innerHTML = html; } else { // Not signed in. } });
function doLogout() { // 上記「ログアウト」ボタンから呼び出される firebase.auth().onAuthStateChanged(user => { firebase.auth().signOut().then(() => { // Sign-out successful. location.reload(); // 当該ページを再読み込みする }).catch((error) => { // An error happened. }); }); }
</script> </body> </html>
*2元は「 defer src=… 」だが、 defer が指定されると動作しない。
*3案内 に従い、firebase-ui-auth__{LANGUAGE_CODE}.js は firebase-ui-auth__ja.js とする。
*4削除しなくても動作には影響しない。
*5当該 onAuthStateChanged() と doLogout() を実行させたいので、当該ページ (index.html) に戻るように設定する。
*6Firebase コンソールで選択した「ログインプロバイダ」のものを有効にする。
*7 *8それぞれのページを適宜に用意する。テストなので、すべて 404.html でも構わない。
fb/public$ echo プライバシーポリシーはまだ規定されていません > privacy.html
fb/public$ echo 利用規約はまだ規定されていません > tos.html
3. 資源の配置
fb/public$ ../../firebase deploy
