Firebase-Github認証

この章では、GitHub APIを使用してユーザーを認証する方法を示します。

ステップ1-GitHub認証を有効にする

Firebaseダッシュボードを開き、サイドメニューの[認証]をクリックしてから、タブバーの[サインイン方法]をクリックします。 GitHub認証を有効にして、 Callback URL をコピーする必要があります。これは手順2で必要になります。ステップ2を完了したら*クライアントID *と*クライアントシークレット*を追加する必要があるため、このタブは開いたままにしておくことができます。

ステップ2-Githubアプリを作成する

このhttps://github.com/settings/developers[link]に従ってGitHubアプリを作成してください。 Firebaseから Callback URL を Authorization callback URL フィールドにコピーする必要があります。アプリを作成したら、 Client Key と Client Secret をGitHubアプリからFirebaseにコピーする必要があります。

ステップ3-ボタンを作成する

*body* タグに2つのボタンを追加します。

インデックス

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

ステップ4-認証関数の作成

*index.js* ファイル内にサインインおよびサインアウト用の関数を作成します。

index.js

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)

   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;

      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;

      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()

   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

これで、ボタンをクリックして認証をトリガーできます。コンソールに認証が成功したことが表示されます。

Firebase Github認証ログ

Firebase-github-authentication

目次