Microsoft로 사용자 로그인

이 문서에서는 Identity Platform을 사용하여 Microsoft로 사용자를 로그인하는 방법을 설명합니다. 개인 Microsoft 계정과 Azure Active Directory(Azure AD) 계정이 모두 지원됩니다.

시작하기 전에

이 튜토리얼에서는 Identity Platform을 이미 사용 설정했으며 HTML 및 자바스크립트를 사용하여 작성된 기본 웹 앱이 있다고 가정합니다. 자세한 방법은 빠른 시작을 참조하세요.

Microsoft를 공급업체로 구성

Microsoft를 ID 공급업체로 구성하려면 다음 안내를 따르세요.

  1. Google Cloud 콘솔에서 ID 공급업체 페이지로 이동합니다.

    ID 공급업체 페이지로 이동

  2. 공급업체 추가를 클릭합니다.

  3. 목록에서 Microsoft를 선택합니다.

  4. Microsoft 앱 ID와 앱 보안 비밀을 입력합니다. ID와 보안 비밀이 없으면 빠른 시작: Azure AD v2.0 엔드포인트로 앱 등록의 단계에 따라 ID와 보안 비밀을 만듭니다.

    이 엔드포인트는 개인 Microsoft 계정과 Azure AD 계정을 모두 지원합니다. Azure AD에 관한 자세한 내용은 Microsoft Identity Platform(v2.0) 개요를 참조하세요.

  5. Microsoft 구성 아래에 나열된 URI를 Microsoft 앱의 유효한 OAuth 리디렉션 URI로 구성합니다. Identity Platform에서 커스텀 도메인을 구성한 경우 기본 도메인 대신 커스텀 도메인을 사용하도록 Microsoft 앱 구성의 리디렉션 URI를 업데이트합니다. 예를 들어 https://myproject.firebaseapp.com/__/auth/handler를 https://auth.myownpersonaldomain.com/__/auth/handler로 변경합니다.

  6. 승인된 도메인 아래의 도메인 추가를 클릭하여 앱의 도메인을 등록합니다. 개발 용도로는 localhost가 이미 기본적으로 사용 설정되어 있습니다.

  7. 애플리케이션 구성에서 설정 세부정보를 클릭합니다. 스니펫을 앱 코드에 복사하여 Identity Platform 클라이언트 SDK를 초기화합니다.

  8. 저장을 클릭합니다.

클라이언트 SDK로 사용자 로그인

  1. OAuthProvider 객체의 인스턴스를 만들고 microsoft.com을 공급업체 ID로 전달합니다.

    자바스크립트

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

  2. 선택사항: OAuth 범위를 추가합니다. 범위는 Microsoft에서 요청할 데이터를 지정합니다. 더 민감한 정보에는 특정 범위가 필요할 수 있습니다. 앱에 필요한 범위를 확인하려면 Microsoft 문서를 참조하세요.

    JavaScript 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

  3. 선택사항: 추가적인 커스텀 OAuth 매개변수를 지정합니다. 이는 Microsoft에만 해당되며 일반적으로 인증 환경을 맞춤설정하는 데 사용됩니다.

    자바스크립트

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

    mkt 매개변수를 사용하여 인증 흐름 언어를 맞춤설정할 수 있습니다. 예를 들면 다음과 같습니다.

    provider.setCustomParameters({
  mkt: 'fr'
});

    tenant 속성을 사용하여 특정 Azure AD 도메인 외부 사용자로 액세스를 제한할 수 있습니다. 테넌트의 친숙한 도메인 이름 또는 GUID 식별자를 지정합니다. 이 도메인 내에 있지 않은 사용자는 로그인할 수 없습니다. 예를 들면 다음과 같습니다.

    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가 지원하는 매개변수 전체 목록은 Microsoft OAuth 문서를 참조하세요. OAuth 또는 Identity Platform이 예약한 매개변수는 전달할 수 없습니다.

  4. OAuthProvider 객체를 사용하여 사용자를 로그인 처리합니다. 팝업 창을 열거나 현재 페이지를 리디렉션할 수 있습니다. 휴대기기에서는 사용자가 리디렉션하기 더 용이합니다.

    signInWithPopup()을 호출하면 팝업이 나타납니다.

    자바스크립트

    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

    페이지를 리디렉션하려면 먼저 signInWithRedirect()를 호출합니다.

    signInWithRedirect, linkWithRedirect, reauthenticateWithRedirect를 사용할 때는 권장사항을 따르세요.

    자바스크립트 

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

    그런 다음 페이지가 로드될 때 getRedirectResult()를 호출하여 Microsoft 토큰을 검색합니다.

    JavaScript 

    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

액세스 토큰이 있으면 이를 사용하여 Microsoft 그래프 API를 호출할 수 있습니다. 예를 들면 다음과 같습니다.

REST 

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

Identity Platform에서 지원하는 다른 공급업체와 달리, Microsoft는 사용자에게 사진 URL을 제공하지 않습니다. 대신 그래프 API를 사용하여 사진의 바이너리 데이터를 요청해야 합니다.

액세스 토큰 외에도 사용자의 Microsoft ID 토큰을 검색할 수 있습니다. 이 토큰의 oid 클레임에는 사용자의 고유 ID가 포함됩니다. 이 ID를 user.providerData[0].uid에 있는 ID와 비교할 수 있습니다. 사용자가 Azure AD 테넌트로 로그인하면 이 필드가 정확하게 일치합니다. 일치하지 않으면 필드가 0으로 패딩됩니다(예: 제휴 ID 4b2eabcdefghijkl은 00000000-0000-0000-4b2e-abcdefghijkl로 표시됨).

sub 클레임을 사용하여 사용자 ID를 비교하지 마세요. sub 클레임은 앱별로 적용되며 Microsoft에서 사용하는 ID와 일치하지 않습니다.

수동으로 사용자 로그인

Google, Facebook, Twitter와 같은 다른 Identity Platform 공급업체를 통해 signInWithCredential()을 호출하여 수동으로 사용자를 로그인 처리할 수 있습니다.

이 기능은 Microsoft에서 지원되지 않습니다. Identity Platform은 Microsoft OAuth 액세스 토큰의 대상을 확인할 수 없으며, 이는 중요한 보안 요구사항입니다.

Identity Platform 클라이언트 SDK를 사용하여 사용자를 로그인 처리할 수 없는 경우 서드 파티 OAuth 라이브러리를 사용하여 Microsoft로 인증해야 합니다. 그런 다음 커스텀 인증을 사용하여 Microsoft 사용자 인증 정보를 커스텀 토큰으로 교환할 수 있습니다.

다음 단계