GitHub'ı JavaScript ile Kullanarak Kimlik Doğrulama

Kullanıcılarınızın GitHub hesaplarını kullanarak Firebase ile kimlik doğrulaması yapmasına izin verebilirsiniz entegre ederek daha iyi bir deneyim elde edebilirsiniz. GitHub'ı entegre edebilirsiniz kullanarak oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanıp veya GitHub OAuth 2.0 akışını manuel olarak gerçekleştirerek ve Firebase'e erişim jetonu.

Başlamadan önce

1. Firebase'i JavaScript projenize ekleyin.
2. Firebase konsolunda Auth bölümünü açın.
3. Oturum açma yöntemi sekmesinde, GitHub sağlayıcısını etkinleştirin.
4. Söz konusu sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Gizli Anahtarı'nı sağlayıcı yapılandırması:
   1. Uygulamanızı kaydetme bir geliştirici uygulaması oluşturun ve uygulamanızın OAuth 2.0 İstemci Kimliği'ni alın ve Client Secret (İstemci Gizli Anahtarı) bölümlerini kullanabilirsiniz.
   2. Firebase OAuth yönlendirme URI'nizin (ör. my-app-12345.firebaseapp.com/__/auth/handler) emin olun uygulamanızın ayarlar sayfasında Yetkilendirme geri çağırma URL'niz olarak GitHub uygulamasının yapılandırması.
5. Kaydet'i tıklayın.

Oturum açma akışını Firebase SDK'sı ile yönetme

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliğini doğrulamanın en kolay yolu oturum açma akışını Firebase JavaScript SDK'sı. (Node.js'de bir kullanıcının kimliğini doğrulamak istiyorsanız veya tarayıcı harici başka bir ortam kullanıyorsanız oturum açma akışını manuel olarak gerçekleştirmeniz gerekir.)

Oturum açma akışını Firebase JavaScript SDK ile yönetmek için şu adımları uygulayın: için şu adımları izleyin:

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

   Web

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

   Web

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

2. İsteğe bağlı: Oluşturduğunuz ek OAuth 2.0 kapsamlarını belirtin kimlik doğrulama sağlayıcısından istekte bulunmak istiyorum. Kapsam eklemek için addScope Örneğin:

   Web

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

   Web

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

   Kimlik doğrulama sağlayıcıya bakın dokümanlarına göz atın.
3. İsteğe bağlı: Ek özel OAuth sağlayıcı parametreleri belirtin onay kutusunu işaretleyin. Özel parametre eklemek için şu çağrıyı yapın: Başlatılan sağlayıcıda, anahtarı içeren bir nesneyle birlikte setCustomParameters OAuth sağlayıcı dokümanlarında ve ilgili değerde belirtildiği şekilde olmalıdır. Örneğin:

   Web

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

   Web

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

   Ayrılmış zorunlu OAuth parametrelerine izin verilmez ve bu parametreler yoksayılır. Bkz. kimlik doğrulama sağlayıcı referansı bölümünde daha fazla bilgi edinebilirsiniz.
4. GitHub sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Şunları yapabilirsiniz: kullanıcılarınızdan oturum açma sayfasına yönlendirilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilir.
   • Pop-up pencereyle oturum açmak için signInWithPopup numaralı telefonu arayın:

     Web

     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

     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 getirmek için kullanılabilen GitHub sağlayıcısının OAuth jetonunu alabilirsiniz.

     Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için Kimlik Doğrulama Referans Belgeleri'ne göz atın.

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

     Web

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

     Web

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

     Ardından, şunu çağırarak GitHub sağlayıcısının OAuth jetonunu alabilirsiniz: Sayfanız yüklendiğinde getRedirectResult:

     Web

     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

     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

     Ayrıca, hataları yakalayıp işleyebilirsiniz. Hata kodlarının listesi için Kimlik Doğrulama Referans Belgeleri'ne göz atı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önetme

Ayrıca bir GitHub hesabı kullanarak Firebase ile kimlik doğrulamak için oturum açma akışını görmek için GitHub OAuth 2.0 uç noktalarını çağırın:

1. Şu adımları uygulayarak GitHub kimlik doğrulamasını uygulamanıza entegre edin: kontrol edin. GitHub oturum açma akışının sonunda, bir OAuth 2.0 erişim jetonu alır.
2. Bir Node.js uygulamasında oturum açmanız gerekiyorsa OAuth erişimini gönderin jeton.
3. Bir kullanıcı GitHub ile başarıyla oturum açtıktan sonra OAuth 2.0 değişimi yapın Firebase kimlik bilgisi için erişim jetonu:

   Web

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

   Web

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

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

   Web

   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

   // 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ılarında Firebase ile kimlik doğrulama

Bir Chrome uzantı uygulaması oluşturuyorsanız daha fazla bilgi için Ekran dışı dokümanlar rehberi.

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

• Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

• Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

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

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