Catch up on everthing we announced at this year's Firebase Summit. Learn more

JavaScript ile GitHub 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. GitHub kimlik doğrulamasını, oturum açma akışını gerçekleştirmek için Firebase SDK'sını kullanarak veya GitHub OAuth 2.0 akışını manuel olarak gerçekleştirerek ve elde edilen erişim belirtecini Firebase'e ileterek entegre edebilirsiniz.

Sen başlamadan önce

  1. JavaScript projeye Firebase ekleyin .
  2. In Firebase konsoluna , Auth bölümünü açın.
  3. Yöntem sekmesinde İşaret Üzerine, GitHub sağlayıcı sağlar.
  4. Sağlayıcı yapılandırmasına o sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Sırrı ekleyin:
    1. Uygulamanızı kaydedin GitHub'dan bir geliştirici uygulama olarak ve uygulamanızın OAuth 2.0 istemci kimliği ve Müşteri Sırrı olsun.
    2. Emin olun sizin Firebase OAuth yönlendirme URI (örn my-app-12345.firebaseapp.com/__/auth/handler ) senin üzerinde uygulamanın ayarlar sayfasında da Yetkilendirme geri arama URL olarak ayarlanır GitHub uygulamasının yapılandırma .
  5. Kaydet seçeneğini tıklayın.

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

Bir web uygulaması oluşturuyorsanız, kullanıcılarınızın GitHub hesaplarını kullanarak Firebase ile kimliklerini doğrulamanın en kolay yolu, Firebase JavaScript SDK ile oturum açma akışını 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 işlemeniz gerekir.)

Firebase JavaScript SDK ile 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 sürümü 9

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

    Web sürümü 8

    var provider = new firebase.auth.GithubAuthProvider();
  2. İsteğe bağlı: doğrulama sağlayıcısından talep istediğiniz ek OAuth 2.0 kapsamlarını belirtme. Bir kapsamını eklemek için, çağrı addScope . Örneğin:

    Web sürümü 9

    provider.addScope('repo');

    Web sürümü 8

    provider.addScope('repo');
    Bkz kimlik doğrulama sağlayıcısı belgelerine .
  3. İsteğe bağlı: OAuth isteği ile göndermek istediğiniz ek özel OAuth sağlayıcısı parametrelerini belirtin. Özel bir parametre eklemek için, çağrı setCustomParameters OAuth sağlayıcısı belgeleri ve karşılık gelen değeri ile belirtilen anahtarını içeren bir nesne ile başlatılmış sağlayıcısına. Örneğin:

    Web sürümü 9

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

    Web sürümü 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Ayrılmış gerekli OAuth parametrelerine izin verilmez ve yoksayılır. Bkz kimlik doğrulama sağlayıcısı referansı Daha fazla ayrıntı için.
  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 yeniden yönlendirerek kullanıcılarınızdan GitHub hesaplarıyla oturum açmalarını isteyebilirsiniz. Yönlendirme yöntemi mobil cihazlarda tercih edilmektedir.
    • Bir pop-up penceresi ile oturum için çağrı signInWithPopup :

      Web sürümü 9

      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;
          // ...
        }).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;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      Web sürümü 8

      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;
          // ...
        }).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;
          // ...
        });
      Ayrıca GitHub API'lerini kullanarak ek veri almak için kullanılabilecek GitHub sağlayıcısının OAuth belirtecini alabileceğinizi unutmayın.

      Burası aynı zamanda hataları yakalayabileceğiniz ve işleyebileceğiniz yerdir. Hata kodlarının listesi için bir göz Auth Referans Dokümanlar .

    • Oturum açma sayfası, çağrı yönlendirme yaparak oturum açmak için signInWithRedirect :

      Web sürümü 9

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

      Web sürümü 8

      firebase.auth().signInWithRedirect(provider);
      Ardından, aynı zamanda arayarak GitHub sağlayıcının OAuth jetonu alabilirsiniz getRedirectResult varsa sayfa yüklemeleri:

      Web sürümü 9

      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;
        }).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;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      Web sürümü 8

      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;
        }).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;
          // ...
        });
      Burası aynı zamanda hataları yakalayabileceğiniz ve işleyebileceğiniz yerdir. Hata kodlarının listesi için bir göz Auth Referans Dokümanlar .

Oturum açma akışını manuel olarak ele alın

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. Takip ederek uygulamasına GitHub kimlik entegre geliştirici belgelerine . 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. Bir kullanıcı GitHub ile başarılı bir şekilde oturum açtıktan sonra, OAuth 2.0 erişim belirtecini bir Firebase kimlik bilgisi ile değiştirin:

    Web sürümü 9

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

    Web sürümü 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Firebase kimlik bilgisini kullanarak Firebase ile kimlik doğrulaması yapın:

    Web sürümü 9

    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.email;
        // ...
      });

    Web sürümü 8

    // 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;
        // ...
      });

Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bir Chrome uzantısı uygulaması oluşturuyorsanız, Chrome uzantı kimliğinizi eklemeniz gerekir:

  1. Projenizi açın Firebase konsoluna .
  2. Kimlik Doğrulama bölümünde Oturum açma yöntemi sayfasında açın.
  3. : Yetkili Alanlar listesine aşağıdaki gibi bir URI ekle
    chrome-extension://CHROME_EXTENSION_ID

Sadece pop-up işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup Chrome uzantıları HTTP yönlendirmeleri kullanamaz gibi), Chrome uzantıları için kullanılabilir. Kimlik doğrulama açılır penceresi tarayıcı eylemi açılır penceresini iptal edeceğinden, bu yöntemleri bir tarayıcı eylemi açılır penceresi yerine bir arka plan sayfası komut dosyasından çağırmalısınız. Popup yöntemleri kullanarak uzantılarda yalnızca kullanılabilir Manifest V2 . Yeni Manifest V3 sadece hiç pop-up işlemleri gerçekleştiremiyor hizmet işçilerinin şeklinde, arka plan komut dosyaları sağlar.

Chrome uzantısının bildirim dosyası marka olarak eklemek emin https://apis.google.com URL content_security_policy AllowList.

Sonraki adımlar

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

  • Uygulamalarınızla olarak, kullanıcı yetkilendirme durumunu öğrenmek için tavsiye edilen yöntem üzerinde bir gözlemci ayarlamaktır Auth nesnesine. Daha sonra, kullanıcının temel profil bilgileri alabilirsiniz User nesnesi. Bkz Kullanıcıları Yönetme .

  • Senin Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama yılında Güvenlik Kuralları , alabilirsiniz, kullanıcının benzersiz bir kullanıcı kimliği imzalı auth değişkeni ve hangi verilerin kullanıcı teneke erişimi kontrol etmek için kullanabilirsiniz.

Kullanıcıların birden çok kimlik doğrulama sağlayıcıları kullanarak uygulamada oturum izin verebilir mevcut bir kullanıcı hesabına auth sağlayıcı kimlik bilgilerini birbirine bağlayan.

Bir kullanıcı Oturumu kapatmak için çağrı signOut :

Web sürümü 9

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

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

Web sürümü 8

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