Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

JavaScript ile Microsoft Kullanarak Kimlik Doğrula

Uçtan uca oturum açma akışını gerçekleştirmek için Firebase SDK'yı kullanarak uygulamanıza genel OAuth oturum açma özelliğini entegre ederek kullanıcılarınızın Microsoft Azure Active Directory gibi OAuth sağlayıcıları kullanarak Firebase ile kimlik doğrulamasına izin verebilirsiniz.

Başlamadan önce

Kullanıcıların Microsoft hesaplarını (Azure Active Directory ve kişisel Microsoft hesapları) kullanarak oturum açmasını sağlamak için öncelikle Firebase projenizde Microsoft'u oturum açma sağlayıcısı olarak etkinleştirmeniz gerekir:

Firebase'i JavaScript projenize ekleyin.
Firebase konsolunda Güvenlik > Kimlik doğrulama'ya gidin.
Oturum açma yöntemi sekmesinde, Microsoft oturum açma sağlayıcısını etkinleştirin.
İlgili sağlayıcının geliştirici konsolundan istemci kimliğini ve istemci gizli anahtarını sağlayıcı yapılandırmasına ekleyin:
1. Microsoft OAuth istemcisini kaydetmek için Quickstart: Register an app with the Azure Active Directory v2.0 endpoint (Hızlı Başlangıç: Azure Active Directory v2.0 uç noktasına bir uygulama kaydetme) başlıklı makaledeki talimatları uygulayın. Bu uç noktanın, Microsoft kişisel hesapları ve Azure Active Directory hesapları kullanılarak oturum açmayı desteklediğini unutmayın. Azure Active Directory 2.0 sürümü hakkında daha fazla bilgi edinin.
2. Uygulamaları bu sağlayıcılara kaydederken projenizin *.firebaseapp.com alanını, uygulamanızın yönlendirme alanı olarak kaydettiğinizden emin olun.
Kaydet'i tıklayın.

Oturum açma akışını Firebase SDK ile işleme

Bir web uygulaması oluşturuyorsanız kullanıcılarınızın kimliğini Microsoft hesaplarını kullanarak Firebase ile doğrulamanın en kolay yolu, oturum açma akışının tamamını Firebase JavaScript SDK ile yönetmektir.

Firebase JavaScript SDK ile oturum açma akışını işlemek için aşağıdaki adımları uygulayın:

microsoft.com sağlayıcı kimliğini kullanarak bir OAuthProvider örneği oluşturun.

Web

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js

Web

var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js

İsteğe bağlı: OAuth isteğiyle göndermek istediğiniz ek özel OAuth parametrelerini belirtin.

Web

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});auth_msft_provider_params.js

Web

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});microsoft-oauth.js

Microsoft'un desteklediği parametreler için Microsoft OAuth dokümanlarına bakın. Firebase'in zorunlu kıldığı parametreleri setCustomParameters() ile iletemeyeceğinizi unutmayın. Bu parametreler client_id, response_type, redirect_uri, state, scope ve response_mode'dur.

Yalnızca belirli bir Azure AD kiracısındaki kullanıcıların uygulamada oturum açmasına izin vermek için Azure AD kiracısının kolay alan adı veya kiracının GUID tanımlayıcısı kullanılabilir. Bu işlem, özel parametreler nesnesinde "tenant" alanını belirterek yapılabilir.

Web

provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});auth_msft_provider_params_tenant.js

Web

provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});microsoft-oauth.js

İsteğe bağlı: Kimlik doğrulama sağlayıcıdan istemek istediğiniz temel profilin ötesinde ek OAuth 2.0 kapsamları belirtin.
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Daha fazla bilgi edinmek için Microsoft izinleri ve rıza belgelerine bakın.

OAuth sağlayıcı nesnesini kullanarak Firebase ile kimlik doğrulayın. Kullanıcılarınızdan, pop-up pencere açarak veya oturum açma sayfasına yönlendirerek Microsoft hesaplarıyla oturum açmalarını isteyebilirsiniz. Mobil cihazlarda yönlendirme yöntemi tercih edilir.

Pop-up pencereyle oturum açmak için signInWithPopup işlevini çağırın:

Web

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });auth_msft_signin_popup.js

Web

firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });microsoft-oauth.js

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

signInWithRedirect, linkWithRedirect veya reauthenticateWithRedirect kullanırken en iyi uygulamalardan yararlanın.

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js

Web

firebase.auth().signInWithRedirect(provider);microsoft-oauth.js

Kullanıcı oturum açma işlemini tamamlayıp sayfaya döndükten sonra getRedirectResult işlevini çağırarak oturum açma sonucunu alabilirsiniz.

Web

import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });auth_msft_signin_redirect_result.js

Web

firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });microsoft-oauth.js

Başarıyla tamamlandıktan sonra, sağlayıcıyla ilişkili OAuth erişim jetonu, döndürülen firebase.auth.UserCredential nesnesinden alınabilir.

OAuth erişim jetonunu kullanarak Microsoft Graph API'yi çağırabilirsiniz.

Örneğin, temel profil bilgilerini almak için aşağıdaki REST API çağrılabilir:

curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

Firebase Auth tarafından desteklenen diğer sağlayıcıların aksine Microsoft, fotoğraf URL'si sağlamaz. Bunun yerine, profil fotoğrafı için ikili verilerin Microsoft Graph API üzerinden istenmesi gerekir.

OAuth erişim jetonuna ek olarak, kullanıcının OAuth kimlik jetonu da firebase.auth.UserCredential nesnesinden alınabilir. Kimlik jetonundaki sub talebi uygulamaya özeldir ve Firebase Auth tarafından kullanılan ve user.providerData[0].uid aracılığıyla erişilebilen birleştirilmiş kullanıcı tanımlayıcıyla eşleşmez. Bunun yerine oid talebi alanı kullanılmalıdır. Oturum açmak için Azure AD kiracısı kullanılırken oid talebi tam olarak eşleşir. Ancak kiracı olmayan durumda oid alanı doldurulur. Birleştirilmiş kimlik 4b2eabcdefghijkl için oid, 00000000-0000-0000-4b2e-abcdefghijkl biçiminde olur.

Yukarıdaki örneklerde oturum açma akışlarına odaklanılsa da linkWithPopup/linkWithRedirect kullanarak bir Microsoft sağlayıcısını mevcut bir kullanıcıya bağlayabilirsiniz. Örneğin, aynı kullanıcıya birden fazla sağlayıcı bağlayarak kullanıcının her ikisiyle de oturum açmasına izin verebilirsiniz.

Web

import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();

linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });auth_msft_link_popup.js

Web

var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });microsoft-oauth.js

Aynı kalıp, son giriş gerektiren hassas işlemler için yeni kimlik bilgilerini almak üzere kullanılabilen reauthenticateWithPopup/reauthenticateWithRedirect ile de kullanılabilir.

Web

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });auth_msft_reauth_popup.js

Web

var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });microsoft-oauth.js

Hesap-farklı-kimlik-bilgisiyle-mevcut hatalarını ele alma

Firebase konsolunda E-posta adresi başına bir hesap ayarını etkinleştirdiyseniz bir kullanıcı, başka bir Firebase kullanıcısının sağlayıcısı (ör. Google) için zaten mevcut olan bir e-postayla bir sağlayıcıda (ör. Microsoft) oturum açmaya çalıştığında auth/account-exists-with-different-credential hatası, AuthCredential nesnesiyle (Microsoft kimlik bilgisi) birlikte oluşturulur. Kullanıcının, oturum açma işlemini tamamlamak için önce mevcut sağlayıcıda (Google) oturum açması, ardından da önceki sağlayıcıya AuthCredential (Microsoft kimlik bilgisi) bağlanması gerekir.

signInWithPopup kullanıyorsanız aşağıdaki örnekteki gibi bir kodla auth/account-exists-with-different-credential hatalarını işleyebilirsiniz:

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

try {
  // Step 1: User tries to sign in using Microsoft.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Microsoft 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 Microsoft 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) {
  // ...
}

Yönlendirme modu

Bu hata, yönlendirme modunda benzer şekilde ele alınır. Aradaki fark, bekleyen kimlik bilgilerinin sayfa yönlendirmeleri arasında (örneğin, oturum depolama alanı kullanılarak) önbelleğe alınması gerektiğidir.

Google, Facebook ve Twitter gibi Firebase tarafından desteklenen diğer OAuth sağlayıcılarının aksine, oturum açma işlemi doğrudan OAuth erişim jetonu tabanlı kimlik bilgileriyle gerçekleştirilebilirken Firebase Auth, Firebase Auth sunucusunun Microsoft OAuth erişim jetonlarının kitlesini doğrulayamaması nedeniyle Microsoft gibi sağlayıcılar için aynı özelliği desteklemez. Bu, kritik bir güvenlik şartıdır ve uygulamaları ve web sitelerini, bir proje (saldırgan) için alınan bir Microsoft OAuth erişim jetonunun başka bir projede (kurban) oturum açmak için kullanılabileceği yeniden oynatma saldırılarına maruz bırakabilir. Bunun yerine Firebase Auth, Firebase Console'da yapılandırılan OAuth istemci kimliği ve gizli anahtarı kullanarak OAuth akışının tamamını ve yetkilendirme kodu değişimini işleme olanağı sunar. Yetkilendirme kodu yalnızca belirli bir istemci kimliği/gizli anahtarla birlikte kullanılabildiğinden, bir proje için alınan yetkilendirme kodu başka bir projede kullanılamaz.

Bu sağlayıcıların desteklenmeyen ortamlarda kullanılması gerekiyorsa üçüncü taraf OAuth kitaplığı ve Firebase özel kimlik doğrulama kullanılması gerekir. İlki, sağlayıcıyla kimlik doğrulamak için, ikincisi ise sağlayıcının kimlik bilgisini özel bir jetonla değiştirmek için gereklidir.

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

Chrome uzantısı uygulaması geliştiriyorsanız Offscreen Documents rehberine bakın.

Proje oluşturulduğunda Firebase, projeniz için benzersiz bir alt alan adı sağlar: https://my-app-12345.firebaseapp.com.

Bu, OAuth ile oturum açma için yönlendirme mekanizması olarak da kullanılır. Bu alanın, desteklenen tüm OAuth sağlayıcıları için izin verilenler listesinde olması gerekir. Ancak bu, kullanıcıların uygulamaya geri yönlendirilmeden önce Microsoft'ta oturum açarken şu alanı görebileceği anlamına gelir: Şuraya git: https://my-app-12345.firebaseapp.com.

Alt alan adınızın gösterilmesini önlemek için Firebase Hosting ile özel alan adı oluşturabilirsiniz:

Hosting için alanınızı ayarlama başlıklı makaledeki 1-3 arasındaki adımları uygulayın. Alan sahipliğinizi doğruladığınızda Hosting, özel alanınız için bir SSL sertifikası sağlar.
Özel alanınızı, Firebase konsolundaki yetkili alanlar listesine ekleyin: auth.custom.domain.com.
Microsoft geliştirici konsolunda veya OAuth kurulum sayfasında, özel alanınızda erişilebilecek olan yönlendirme sayfasının URL'sini beyaz listeye ekleyin: https://auth.custom.domain.com/__/auth/handler.

JavaScript kitaplığını başlatırken authDomain alanıyla özel alanınızı belirtin:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_ID'
};
firebase.initializeApp(config);

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 (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı 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ığına bakılmaksızın projenizdeki her uygulamada 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 nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini alabilirsiniz. Kullanıcıları yönetme başlıklı makaleyi inceleyin.
Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının hangi verilere erişebileceğini kontrol etmek için bu kimliği kullanabilirsiniz.

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

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

Web

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

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

JavaScript ile Microsoft Kullanarak Kimlik Doğrula Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.