反应原生博览会。 Azure 身份验证答案

【问题标题】：React Native Expo. Azure auth反应原生博览会。 Azure 身份验证
【发布时间】：2021-09-28 00:31:59
【问题描述】：

我根据this tutorial创建了一个带有Azure AD身份验证的React Native Expo项目。

这是我的代码：

    const discovery = useAutoDiscovery('https://login.microsoft.com/c764ad56-5d28-4d02-acc3-197e61278bb3');

    const [request, response, promptAsync] = useAuthRequest (
    {
        clientId: '4344ecc3-5737-4aa0-b71c-2e65affb802c',
        scopes: [ 'User.Read' ],
        redirectUri: 'exp://192.168.1.7:19000'
    },
    discovery
    );
    
    const logon = async () => {
    
        await promptAsync();
    
        if (response.type == 'success') {
            navigation.navigate('List');
        }
    }

我在控制台中记录了我的请求并显示了我的登录网址

AuthRequest {
  "clientId": "4344ecc3-5737-4aa0-b71c-2e65affb802c",
  "clientSecret": undefined,
  "codeChallenge": "h5gKD7BtEXFtvWjP6ajKfNR4csomtPVtj-sRv5Zykn8",
  "codeChallengeMethod": "S256",
  "codeVerifier": "bCPan6PJWKmf0gLRZLKxK54DTSk402iQftTdFpHx1n7Xq9dX9CYF2fGDmvTjs6SopOho0i8BB70Usfi0M7ezws1a1GMWS0uv9T7ji9l4gv5jza11lJIk3Uil21xjUGh2",       
  "extraParams": Object {},
  "prompt": undefined,
  "redirectUri": "exp://192.168.1.7:19000",
  "responseType": "code",
  "scopes": Array [
    "User.Read",
  ],
  "state": "4cYI6HmNca",
  "url": "https://login.microsoft.com/c764ad56-5d28-4d02-acc3-197e61278bb3/oauth2/authorize?code_challenge=h5gKD7BtEXFtvWjP6ajKfNR4csomtPVtj-sRv5Zykn8&code_challenge_method=S256&redirect_uri=exp%3A%2F%2F192.168.1.7%3A19000&client_id=4344ecc3-5737-4aa0-b71c-2e65affb802c&response_type=code&state=4cYI6HmNca&scope=User.Read",
  "usePKCE": true,
}

这是我的 Azure 广告注册数据

我的重定向网址是 exp://192.168.1.7:19000

尽管如此，我还是得到了错误

为输入参数“redirect_uri”提供的值无效。预期值是一个 URI，它与为此客户端应用程序注册的重定向 URI 匹配

我做错了什么？

【问题讨论】：

标签： react-native azure-active-directory

【解决方案1】：

请检查以下几点是否是导致问题的原因：。

该错误看起来像是应用程序不允许使用 IP 地址。尝试使用网络名称代替 IP 地址。如果您无权访问该名称，请在您的计算机上为该特定 IP 创建一个别名。例如：redirect_url: 'http://localhost:8080',

for expo 重定向 uri exp://localhost:19000/--/

还可以根据提供的文档查看 uris > Authentication - Expo Documentation

尝试使用 v2 端点

常量发现 = useAutoDiscovery('https://login.microsoftonline.com//v2.0');

利用 AuthSession.makeRedirectUri

代码

      const discovery = useAutoDiscovery('https://login.microsoft.com/c764ad56-5d28-4d02-acc3-197e61278bb3/v2.0');

       const [request, response, promptAsync] = useAuthRequest (
        {
            clientId: '4344ecc3-5737-4aa0-b71c-2e65affb802c',
          redirectUri: AuthSession.makeRedirectUri({  
            native: "exp://localhost:19000",
          }),
    extraParams: { code_verifier: request.codeVerifier },
    
    scopes: [ 'User.Read' ],
  
    //
    //
        },
        discovery

AuthSession.makeRedirectUri 做了很多繁重的工作具有通用平台支持。它使用的幕后展示链接。

使用 AuthSession.useAuthRequest() 构建请求，该钩子允许对于异步设置，这意味着移动浏览器不会阻止身份验证。

参考：AuthSession not working for Authorization Code Flow

【讨论】：