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'yı kullanarak veya GitHub OAuth 2.0 akışını manuel olarak gerçekleştirip elde edilen erişim belirtecini Firebase'e geçirerek 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. Sağlayıcının geliştirici konsolundan İstemci Kimliği ve İstemci Sırrını sağlayıcı yapılandırmasına ekleyin:
    1. Uygulamanızı GitHub'da bir geliştirici uygulaması olarak kaydedin ve uygulamanızın OAuth 2.0 İstemci Kimliği ve İstemci Sırrı'nı alın.
    2. Firebase OAuth yönlendirme URI'nizin (örn. my-app-12345.firebaseapp.com/__/auth/handler ) , GitHub uygulamanızın yapılandırmasında uygulamanızın ayarlar sayfasında Yetkilendirme geri arama 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, 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 ile gerçekleştirmektir. (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 yapmanız 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 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 talep etmek istediğiniz ek OAuth 2.0 kapsamlarını belirtin. Kapsam eklemek için addScope öğesini ç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ı 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ılmış 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 verilmez ve dikkate alınmaz. Daha fazla ayrıntı için kimlik doğrulama sağlayıcısı 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.
    • Bir 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ılabilen GitHub sağlayıcısının OAuth jetonunu alabileceğinizi unutmayın.

      Burası aynı zamanda hataları yakalayıp işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Kimlik Doğrulama Referans Dokümanlarına bakın.

    • Oturum açma sayfasına yönlendirerek oturum açmak için signInWithRedirect arayın : "signInWithRedirect" 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 öğesini ç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 işleyebileceğiniz yerdir. Hata kodlarının bir listesi için Kimlik Doğrulama Referans Dokümanlarına 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ı işleyerek 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'da 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 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

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

Bir Chrome uzantı 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ğıdaki gibi bir URI ekleyin: 
    chrome-extension://CHROME_EXTENSION_ID

Chrome uzantıları HTTP yönlendirmelerini kullanamadığından yalnızca açılır pencere işlemleri ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup ) Chrome uzantıları tarafından 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 penceresinden ziyade 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 hiç gerçekleştiremeyen hizmet çalışanları biçimindeki arka plan komut dosyalarına izin verir.

Chrome uzantınızın bildirim 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 kullanıcının oturum açtığı kimlik bilgilerine (yani, kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak saklanı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 nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetin .

  • Firebase Gerçek Zamanlı Veritabanı 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ı 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 öğesini arayın:

Web modular API

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

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

Web namespaced API

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