GitHub'ı JavaScript ile Kullanarak Kimlik Doğrulama

GitHub kimlik doğrulamasını uygulamanıza entegre ederek kullanıcılarınızın GitHub hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz. Oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak veya GitHub OAuth 2.0 akışını manuel olarak gerçekleştirip elde edilen erişim jetonunu Firebase'e ileterek GitHub kimlik doğrulamasını entegre edebilirsiniz.

Sen başlamadan önce

1. Firebase'i JavaScript projenize ekleyin .
2. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
3. Oturum açma yöntemi sekmesinde GitHub sağlayıcısını etkinleştirin.
4. Bu sağlayıcının geliştirici konsolundan İstemci Kimliğini ve İstemci Sırrını sağlayıcı yapılandırmasına ekleyin:
   1. Uygulamanızı GitHub'da geliştirici uygulaması olarak kaydedin ve uygulamanızın OAuth 2.0 İstemci Kimliğini ve İstemci Sırrını alın.
   2. Firebase OAuth yönlendirme URI'nizin (ör. my-app-12345.firebaseapp.com/__/auth/handler ) , GitHub uygulamanızın yapılandırmasındaki uygulamanızın ayarlar sayfasında Yetkilendirme geri çağırma URL'niz olarak ayarlandığından emin olun.
5. Kaydet'i tıklayın.

Oturum açma akışını Firebase SDK ile yönetin

Bir web uygulaması oluşturuyorsanız GitHub hesaplarını kullanarak kullanıcılarınızın Firebase ile kimliklerini doğrulamanın en kolay yolu, oturum açma akışını Firebase JavaScript SDK ile yönetmektir. (Node.js'de veya tarayıcı olmayan başka bir ortamda bir kullanıcının kimliğini doğrulamak istiyorsanız oturum açma akışını manuel olarak gerçekleştirmelisiniz.)

Firebase JavaScript SDK'sıyla oturum açma akışını yönetmek için şu adımları izleyin:

1. GitHub sağlayıcı nesnesinin bir örneğini oluşturun:

   Web modular API

   import { GithubAuthProvider } from "firebase/auth";
   
   const provider = new GithubAuthProvider();
   auth_github_provider_create.js

   Web namespaced API

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

2. İsteğe bağlı : Kimlik doğrulama sağlayıcısından istemek istediğiniz ek OAuth 2.0 kapsamlarını belirtin. Kapsam eklemek için addScope çağırın. Örneğin:

   Web modular API

   provider.addScope('repo');
   auth_github_provider_scopes.js

   Web namespaced API

   provider.addScope('repo');
   github.js

   Kimlik doğrulama sağlayıcısının belgelerine bakın.
3. İsteğe bağlı : OAuth isteğiyle birlikte göndermek istediğiniz ek özel OAuth sağlayıcı parametrelerini belirtin. Özel bir parametre eklemek için, OAuth sağlayıcı belgelerinde belirtilen anahtarı ve karşılık gelen değeri içeren bir nesneyle, başlatılan sağlayıcıda setCustomParameters çağırın. Örneğin:

   Web modular API

   provider.setCustomParameters({
     'allow_signup': 'false'
   });
   auth_github_provider_params.js

   Web namespaced API

   provider.setCustomParameters({
     'allow_signup': 'false'
   });
   github.js

   Ayrılmış gerekli OAuth parametrelerine izin verilmiyor ve göz ardı edilecek. Daha fazla ayrıntı için kimlik doğrulama sağlayıcısının referansına bakın.
4. GitHub sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulaması yapın. Bir açılır pencere açarak veya oturum açma sayfasına yönlendirerek kullanıcılarınızdan GitHub hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilmektedir.
   • Açılır pencereyle oturum açmak için signInWithPopup çağırın:

     Web modular API

     import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     signInWithPopup(auth, provider)
       .then((result) => {
         // This gives you a GitHub Access Token. You can use it to access the GitHub API.
         const credential = GithubAuthProvider.credentialFromResult(result);
         const token = credential.accessToken;
     
         // The signed-in user info.
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = GithubAuthProvider.credentialFromError(error);
         // ...
       });
     auth_github_signin_popup.js

     Web namespaced API

     firebase
       .auth()
       .signInWithPopup(provider)
       .then((result) => {
         /** @type {firebase.auth.OAuthCredential} */
         var credential = result.credential;
     
         // This gives you a GitHub Access Token. You can use it to access the GitHub API.
         var token = credential.accessToken;
     
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).catch((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.js

     Ayrıca GitHub API'lerini kullanarak ek veriler almak için kullanılabilecek GitHub sağlayıcısının OAuth belirtecini alabileceğinizi de unutmayın.

     Burası aynı zamanda hataları yakalayıp yönetebileceğiniz yerdir. Hata kodlarının bir listesi için Yetkilendirme Referans Dokümanlarına bakın.

   • Oturum açma sayfasına yönlendirerek oturum açmak için signInWithRedirect çağırın: 'signInWithRedirect'i kullanırken en iyi uygulamaları izleyin.

     Web modular API

     import { getAuth, signInWithRedirect } from "firebase/auth";
     
     const auth = getAuth();
     signInWithRedirect(auth, provider);
     auth_signin_redirect.js

     Web namespaced API

     firebase.auth().signInWithRedirect(provider);
     index.js

     Ardından, sayfanız yüklendiğinde getRedirectResult çağırarak GitHub sağlayıcısının OAuth belirtecini de alabilirsiniz:

     Web modular API

     import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";
     
     const auth = getAuth();
     getRedirectResult(auth)
       .then((result) => {
         const credential = GithubAuthProvider.credentialFromResult(result);
         if (credential) {
           // This gives you a GitHub Access Token. You can use it to access the GitHub API.
           const token = credential.accessToken;
           // ...
         }
     
         // The signed-in user info.
         const user = result.user;
         // IdP data available using getAdditionalUserInfo(result)
         // ...
       }).catch((error) => {
         // Handle Errors here.
         const errorCode = error.code;
         const errorMessage = error.message;
         // The email of the user's account used.
         const email = error.customData.email;
         // The AuthCredential type that was used.
         const credential = GithubAuthProvider.credentialFromError(error);
         // ...
       });
     auth_github_signin_redirect_result.js

     Web namespaced API

     firebase.auth()
       .getRedirectResult()
       .then((result) => {
         if (result.credential) {
           /** @type {firebase.auth.OAuthCredential} */
           var credential = result.credential;
     
           // This gives you a GitHub Access Token. You can use it to access the GitHub API.
           var token = credential.accessToken;
           // ...
         }
     
         // The signed-in user info.
         var user = result.user;
         // IdP data available in result.additionalUserInfo.profile.
           // ...
       }).catch((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.js

     Burası aynı zamanda hataları yakalayıp yönetebileceğiniz yerdir. Hata kodlarının bir listesi için Yetkilendirme Referans Dokümanlarına bakın.

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the GitHub credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Oturum açma akışını manuel olarak yönetin

Ayrıca GitHub OAuth 2.0 uç noktalarını çağırarak oturum açma akışını yöneterek bir GitHub hesabı kullanarak Firebase ile kimlik doğrulaması yapabilirsiniz:

1. Geliştiricinin belgelerini takip ederek GitHub kimlik doğrulamasını uygulamanıza entegre edin. GitHub oturum açma akışının sonunda bir OAuth 2.0 erişim belirteci alacaksınız.
2. Bir Node.js uygulamasında oturum açmanız gerekiyorsa OAuth erişim belirtecini Node.js uygulamasına gönderin.
3. Kullanıcı GitHub'da başarılı bir şekilde oturum açtıktan sonra OAuth 2.0 erişim belirtecini Firebase kimlik bilgisi ile değiştirin:

   Web modular API

   import { GithubAuthProvider } from "firebase/auth";
   
   const credential = GithubAuthProvider.credential(token);
   auth_github_provider_credential.js

   Web namespaced API

   var credential = firebase.auth.GithubAuthProvider.credential(token);
   github.js

4. Firebase kimlik bilgilerini kullanarak Firebase ile kimlik doğrulaması yapın:

   Web modular API

   import { getAuth, signInWithCredential } from "firebase/auth";
   
   // Sign in with the credential from the user.
   const auth = getAuth();
   signInWithCredential(auth, credential)
     .then((result) => {
       // Signed in 
       // ...
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // ...
     });
   auth_signin_credential.js

   Web namespaced API

   // Sign in with the credential from the user.
   firebase.auth()
     .signInWithCredential(credential)
     .then((result) => {
       // Signed in 
       // ...
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.email;
       // ...
     });
   index.js

Chrome uzantısında Firebase ile kimlik doğrulama

Bir Chrome uzantısı uygulaması oluşturuyorsanız Ekran Dışı Belgeler kılavuzuna bakın.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açtığı kimlik bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

• Uygulamalarınızda kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu, Auth Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

• Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak kullanıcıların birden fazla kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut arayın:

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js