ナビゲーションへスキップ コンテンツへスキップ

WebTecNote

気ままに綴る独学メモ帳

  • About
  • Contact
  • Downloads
メインナビゲーション

[JS] Firebaseの覚書 ③ OAuth認証

2019/07/01By Tenderfeel Firebase, Javascript

Google, Twitter, Facebook等のOAuth系認証は使うProviderクラスが変わるだけでやることは同じ。なのでまとめました。
Facebook認証とTwitter認証はデベロッパーアカウントでのアプリ設定が必要なのでGoogle認証より手間がかかる。

Contents

  • 1 認証プロバイダー
  • 2 ポップアップログイン
  • 3 リダイレクトログイン
  • 4 再認証
  • 5 ログアウト
  • 6 Google認証でアカウントの選択を表示する
  • 7 Facebook側アプリ作成
    • 7.1 シェア
    • 7.2 関連記事

認証プロバイダー

サービス別に分かれています:

new firebase.auth.GoogleAuthProvider()
new firebase.auth.TwitterAuthProvider()
new firebase.auth.FacebookAuthProvider()

switchで切り替えられる:

let provider;
switch (providerName) {
  case 'google.com':
    provider = new firebase.auth.GoogleAuthProvider();
    break;
  case 'twitter.com':
    provider = new firebase.auth.TwitterAuthProvider();
    break;
  case 'facebook.com':
    provider = new firebase.auth.FacebookAuthProvider();
    break;
}

ポップアップログイン

ポップアップウィンドウが立ち上がって認証するやつ。元のページがそのままなのでSPA向き。

signInWidthPopupを利用する

// async function
try {
  const { user } = await firebase.auth().signInWithPopup(provider)
} catch (e) {
  console.error(e);
}

リダイレクトログイン

同じ窓内でページ遷移とリダイレクトが発生する。

signInWithRedirectを利用する

// async function
try {
  const { user } = await firebase.auth().signInWithRedirect(provider)
} catch (e) {
  console.error(e);
}

再認証

リダイレクト認証、ポップアップ認証の関数名前半がreauthenticateWidthに変化する。
再認証はUserのメソッドであることに注意

// async function
try {
  const { user } = await firebase.auth().currentUser.reauthenticateWithPopup(provider)
} catch (e) {
  console.error(e);
}

ログアウト

どの認証方法でも共通

// async function
try {
  await firebase.auth().signOut()
} catch (e) {
  console.error(e);
}

Google認証でアカウントの選択を表示する

デフォルトの挙動では、アプリケーションを連携すると2回目以降のログインでは自動的にアカウントが選択されるが、ログインの都度アカウントを選ぶようにしたい時はAuthProviderのオプションでpropmtを設定する。

const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
googleAuthProvider.setCustomParameters({
  prompt: 'select_account'
});

Facebook側アプリ作成

デベロッパーアカウントでfacebook for developersにアクセスする。

アプリ作成して、ロボット確認など済ませるとダッシュボードに飛ばされる。

 

よく見ると下の方に製品を追加というのがあるのでスクロールする。

 

一番上の列中央にあるFacebookログインの設定ボタンを押す。

 

クイックスタートが始まるけど無視して左側のメニューから設定を押す。

 

  → 

有効なOAuthリダイレクトURIに、Firebaseのログイン方法で有効を押した時に出てくるポップアップのOAuthリダイレクトURIをコピペする。

 

設定→ベーシックでアプリの基本情報を埋める。
最初から埋まってるものはそのままでおk。プライバシーポリシーURLとカテゴリが必須。

 

上のアプリID隣にあるスイッチを押してオンにする。
アプリ公開について問われるので承認押す。

Facebookの方に戻ってこちらもスイッチを有効にしたらアプリIDとapp secretを入力。

シェア

  • シェア
  • クリックして Twitter で共有 (新しいウィンドウで開きます)
  • Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)
  • クリックして Skype で共有 (新しいウィンドウで開きます)
  • クリックして Tumblr で共有 (新しいウィンドウで開きます)
  • クリックして Pocket でシェア (新しいウィンドウで開きます)
  • クリックして LinkedIn で共有 (新しいウィンドウで開きます)
  • クリックして Pinterest で共有 (新しいウィンドウで開きます)
  • クリックして WhatsApp で共有 (新しいウィンドウで開きます)
  • クリックして Telegram で共有 (新しいウィンドウで開きます)
  • クリックして友達へメールで送信 (新しいウィンドウで開きます)

関連記事

Firebase、FirebaseAuthentication、login-system

投稿ナビゲーション

[WordPress] TinyMCE(v5) カスタムボタンの追加とショートコード/HTMLの相互変換
[JS] Firebaseの覚書 ④ 認証エラーメッセージの日本語化

コメントを残す コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

フォローする
  • Twitter
カテゴリー
  • CSS (63)
    • Compass (3)
    • Sass (1)
  • Custom (8)
  • Dojo (1)
  • GoogleMap (23)
  • HTML&XHTML (14)
    • HTML5 (3)
  • Information (19)
  • Javascript (90)
    • Firebase (8)
    • Vue&Nuxt (15)
  • jQuery (10)
  • Material (9)
  • Memo (84)
  • MooTools (62)
    • Tutorial (6)
  • Perl (1)
  • PHP (37)
    • CakePHP (2)
    • OOPでBBS (7)
    • Zend Framework (4)
  • Template (29)
    • 4BOX (8)
    • 5BOX (5)
    • 6BOX (4)
    • Form (5)
    • Menu (1)
    • Web Site (6)
  • wordpress (70)
    • plugin (9)
    • Reference (7)
    • Themes Making (3)
最近の投稿
  • WordPress GraphQL対応のカスタム投稿タイプ設定
  • [Vue] vue-test-utils の Deprecation warning への対応
  • Vercel+Nuxt.jsで爆速Webアプリ作成
  • [JS] Firebaseの覚書 ⑧ 匿名認証の利用
  • Nuxt.jsでTestCafeを使用してみたメモ
最近のコメント
  • [Sass] Sass 3.2で実装された新機能がヤバい に 【コーディング週間日報】3/24(水)〜 3/27(土)の学習 | ミヤコーダー より
  • [Chart.js] レーダーチャートの値が表示されないバグをTooltipカスタムでなんとかする に chart.js2.9.4でlabelsをテンプレート指定すると表示されない - ダーシャのブログ より
  • [Chart.js] レーダーチャートの値が表示されないバグをTooltipカスタムでなんとかする に chart.js2.9.4でlabelsをテンプレート指定すると表示されない | ダーシャのブログ より
  • [HTML] Aタグにおけるrel属性の意味と効果について に aタグでリンクを繋げる際に気をつけたい事 | デザインスタジオドアーズ名古屋 より
  • レスポンシブWebデザインを実装するためのTips に 1行で、画像をレスポンシブにする – たつブロ より
Tags
1Column 2column Ajax Android Aptana Class CodeSandbox CSS CSS3 Demo Download Dreamweaver Elastic Firebase FirebaseAuthentication Fixed Form free script Fx.Tween Google GoogleMap HTML5 HTML5API IE infowindow iphone JavaScript jQuery MooTools Nuxt OOP PHP Regular Expression rollover Sass Template Vue Web Browser wordpress wp-custom wp-function wp-plugin wp-themes XHTML zeromail
  • RSS - 投稿
  • RSS - コメント
© WebTecNote 2021 • ThemeCountry Powered by WordPress
loading キャンセル
投稿を送信できませんでした。メールアドレスを確認してください。
メール送信チェックに失敗しました。もう一度お試しください。
このブログではメールでの投稿共有はできません。