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ını sağlayabilirsiniz. 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 projenize Firebase ekleyin .
  2. Firebase konsolunda , Yetkilendirme 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 (örneğin my-app-12345.firebaseapp.com/__/auth/handler ) GitHub uygulamanızın yapılandırma sayfasında uygulamanızın ayarlar sayfasında Yetkilendirme geri arama URL'niz olarak ayarlandığından emin olun.
  5. Kaydet'i 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, oturum açma akışını Firebase JavaScript SDK'sı 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 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 version 9

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

    Web version 8

    var provider = new firebase.auth.GithubAuthProvider();
  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 . Örneğin:

    Web version 9

    provider.addScope('repo');

    Web version 8

    provider.addScope('repo');
    Kimlik doğrulama sağlayıcı 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 version 9

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

    Web version 8

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Ayrılmış gerekli OAuth parametrelerine izin verilmez ve yoksayılır. Daha fazla ayrıntı için kimlik doğrulama sağlayıcı 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 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 açılır pencereyle oturum açmak için signInWithPopup arayın:

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

      Web version 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 bir listesi için Auth Reference Docs'a bakın.

    • Oturum açma sayfasına yeniden yönlendirerek oturum açmak için signInWithRedirect arayın:

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      Ardından, sayfanız yüklendiğinde getRedirectResult çağırarak GitHub sağlayıcısının OAuth belirtecini de alabilirsiniz:

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

      Web version 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 bir listesi için Auth Reference Docs'a bakın.

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 izleyerek 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. 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 version 9

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

    Web version 8

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

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

    Web version 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 eklemelisiniz:

  1. Projenizi Firebase konsolunda açın.
  2. Kimlik Doğrulama bölümünde, Oturum açma yöntemi sayfasını açın.
  3. Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:
    chrome-extension://CHROME_EXTENSION_ID

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından, Chrome uzantılarında yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) 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. Açılır pencere yöntemleri yalnızca Manifest V2 kullanan uzantılarda kullanılabilir. Daha yeni Manifest V3 , yalnızca açılır pencere işlemlerini gerçekleştiremeyen hizmet çalışanları biçiminde arka plan komut dosyalarına izin verir.

Chrome uzantınızın manifest dosyasında https://apis.google.com URL'sini content_security_policy izin verilenler listesine eklediğinizden emin olun.

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ı adı ve parolası, telefon numarası veya yetkilendirme sağlayıcı bilgileri gibi kimlik bilgileriyle ilişkilendirilir. 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ızda, kullanıcınızın auth durumunu öğrenmenin önerilen yolu, Auth nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini alabilirsiniz. Kullanıcıları Yönetme konusuna bakın.

  • Firebase Gerçek Zamanlı Veritabanınız ve Bulut Depolama Güvenlik Kurallarınızda , oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu bir 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 çok 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:

Web version 9

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

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

Web version 8

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