このドキュメントでは、Identity Platform を使用して GitHub でユーザーのログインを行う方法ついて説明します。
始める前に
このチュートリアルは、すでに Identity Platform が有効であり、HTML と JavaScript を使用して作成された基本的なウェブアプリがあることを前提としています。その方法については、クイックスタートをご覧ください。
GitHub をプロバイダとして構成する
GitHub を ID プロバイダとして構成するには:
Cloud Console で [ID プロバイダ] ページに移動します。
[プロバイダを追加] をクリックします。
リストから [GitHub] を選択します。
GitHub の [クライアント ID] と [クライアント シークレット] を入力します。ID とシークレットをまだ持っていない場合は、GitHub アプリケーション ページから入手できます。
[Configure GitHub] に表示されている URI を、GitHub アプリの有効な OAuth リダイレクト URI として構成します。
[承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、
localhost
はデフォルトですでに有効になっています。[アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。
[保存] をクリックします。
Client SDK を使用したユーザーのログイン
GitHub プロバイダ オブジェクトのインスタンスを作成します。
JavaScript
var provider = new firebase.auth.GithubAuthProvider();
省略可: OAuth スコープを追加します。スコープでは、GitHub からリクエストするデータを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。アプリが必要とするスコープを判断するには、プロバイダのドキュメントをご覧ください。
JaveScript
provider.addScope('repo');
省略可: 認証フローをローカライズします。言語を指定するか、デバイスのデフォルトの言語を使用できます。
JaveScript
firebase.auth().languageCode = 'fr_FR'; // To apply the default browser preference instead of // explicitly setting it. // firebase.auth().useDeviceLanguage();
省略可: その他のカスタム OAuth パラメータを指定します。これは GitHub 特有であり、通常は認証エクスペリエンスのカスタマイズに使用されます。
JaveScript
provider.setCustomParameters({ 'allow_signup': 'false' });
OAuth または Identity Platform で予約されているパラメータを渡すことはできません。
GitHub プロバイダ オブジェクトを使用して、ユーザーのログインを行います。ポップアップ ウィンドウを開く、または現在のページをリダイレクトできます。モバイル デバイスでは、リダイレクトの方がユーザーにとってより簡単な方法です。
ポップアップを表示するには、
signInWithPopup()
を呼び出します。JaveScript
firebase.auth().signInWithPopup(provider).then(function(result) { // This gives you a GitHub Access Token. You can use it to access the GitHub API. var token = result.credential.accessToken; // The signed-in user info. var user = result.user; // ... }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
ページをリダイレクトするには、まず
signInWithRedirect()
を呼び出します。JaveScript
firebase.auth().signInWithRedirect(provider);
次に、ページが読み込まれるときに
getRedirectResult()
を呼び出すことによって、GitHub トークンを取得します。JaveScript
firebase.auth().getRedirectResult().then(function(result) { if (result.credential) { // This gives you a GitHub Access Token. You can use it to access the GitHub API. var token = result.credential.accessToken; // ... } // The signed-in user info. var user = result.user; }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
アクセス トークンを取得したら、そのトークンを使用して GitHub API を呼び出すことができます。例:
REST
curl -H "Authorization: Bearer [TOKEN]" https://api.github.com/gists/starred
手動でのユーザーのログイン
Client SDK を使用しない場合は、次の手順でログイン フローを手動で処理することもできます。
デベロッパー向けドキュメントの手順に沿って、GitHub 認証をアプリに統合します。
前の手順で実装したフローを使用して、GitHub でユーザーのログインを行います。
GitHub から受け取ったトークンを Identity Platform の認証情報と交換します。
var credential = firebase.auth.GithubAuthProvider.credential(token);
認証情報を使用して、Identity Platform でユーザーのログインを行います。
firebase.auth().signInWithCredential(credential).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
次のステップ
- Identity Platform ユーザーの詳細について確認する。
- 他の ID プロバイダでユーザーのログインを行う。