Firebase Auth for Web - 为什么没有“MicrosoftAuthProvider”或“AzureAuthProvider”？答案

【问题标题】：Firebase Auth for Web -- why is there no `MicrosoftAuthProvider` or `AzureAuthProvider`?Firebase Auth for Web - 为什么没有“MicrosoftAuthProvider”或“AzureAuthProvider”？
【发布时间】：2021-06-09 21:20:17
【问题描述】：

我很困惑如何使用 Firebase 最轻松地配置 Microsoft 的身份验证提供程序。

我已将 GoogleAuthProvider 和 GithubAuthProvider 配置为 Firebase 身份验证的登录提供程序：

https://console.firebase.google.com/project/${PROJECT}/authentication/providers

我已将 Firebase 身份验证添加到我的应用并查看 Easily add sign-in to your Web app with Firebase UI

<html>
<head>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"/>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"/>
<script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"/>

<link
  type="text/css"
  rel="stylesheet"
  href="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.css"
</head>

<body>
<h2>App</h2>
<hr/>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>
<script>
// Initialize Firebase
var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
  };
firebase.initializeApp(firebaseConfig);

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

var uiConfig = {
    callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
            return true;
        },
        uiShown: function() {
            document.getElementById('loader').style.display = 'none';
        }
    },
    signInFlow: 'popup',
    signInSuccessUrl: '/app',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        //firebase.auth.MicrosoftAuthProvider.PROVIDER_ID,
    ],
    tosUrl: "/tos",
    privatePolicyUrl: "/policy",
};

ui.start('#firebaseui-auth-container', uiConfig);
</script>
</body>
</html>

这适用于 Google 和 GitHub，但我不清楚为什么没有 Microsoft|Azure 变体：

# Either
firebase.auth.MicrosoftAuthProvider.PROVIDER_ID
# Or
firebase.auth.AzureAuthProvider.PROVIDER_ID

Microsoft 显然是提供者之一。

它没有被列为`firebase.AuthProvider' 的实现者，并且在OAuth providers (Google, Facebook, Twitter and GitHub) 中被省略，但它确实有它的Authenticate using Microsoft with JavaScript，但是这种方法——即使它确认它使用 Firebase JavaScript SDK 来处理 OAuth 流——不一样：

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

我的 JavaScript fu 不是很强大，希望能得到指导。

【问题讨论】：

标签： firebase-authentication

【解决方案1】：

这是因为处理 Microsoft 的解决方案需要额外的设置，该设置不能作为插入式解决方案提供，并且需要代表用户进行额外的设置。因此无法直接支持，属于yahoo.com等自定义认证方案。

如果有功能请求，它可以更改，但它必须符合 Microsoft 获得特殊待遇级别的独特条件

【讨论】：

【解决方案2】：

我发现（这对我来说并不明显），我可以将 Microsoft OAuth 提供者通过其提供者 ID（即 "microsoft.com"）添加到 uiConfig 的 signInOptions 属性中，即

var uiConfig = {
    callbacks: {
        signInSuccessWithAuthResult: function(authResult, redirectUrl) {
            return true;
        },
        uiShown: function() {
            document.getElementById('loader').style.display = 'none';
        }
    },
redirect.
    signInFlow: 'popup',
    signInSuccessUrl: '/success',
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID,
        "microsoft.com", // Microsoft OAuth provider ID
    ],
    tosUrl: "/tos",
    privatePolicyUrl: "/privacy",
};

【讨论】：