Azure AD B2C 中对 React React Native 应用程序的授权

Question

有人成功在Azure Ad B2C中创建具有授权的React Native应用程序吗？

我为 React Web 应用程序和 .Net Core API 做到了这一点，但是我为 React Native 找到的任何库都无法正常工作，而且我是 React Native 的初学者。请给我一些提示教程或存储库。我被困得很厉害。

Answer 1

我找到了一个适用于 Azure AD B2C 的可用 React-Native 库。您可以关注这篇文章。 这是例子：

import B2CAuthentication from "../auth-ad-js/ReactNativeADB2C";
import LoginView from "../auth-ad-js/LoginView";

const CLIENT_ID = "<provide your client id>";

export default class LoginScreen extends React.Component {
  static navigationOptions = {
    title: "Login"
  };

  render() {
    const b2cLogin = new B2CAuthentication({
      tenant: 'yourtenant.onmicrosoft.com',
      client_id: CLIENT_ID,
      client_secret: "<key set in application/key>",
      user_flow_policy: "B2C_1_signupsignin",
      reset_password_policy: 'B2C_1_password_reset',
      token_uri: "https://saroujetmp.b2clogin.com/saroujetmp.onmicrosoft.com/oauth2/v2.0/token",
      authority_host: "https://saroujetmp.b2clogin.com/saroujetmp.onmicrosoft.com/oauth2/v2.0/authorize",
      redirect_uri: "https://functionapp120190131041619.azurewebsites.net/.auth/login/aad/callback",
      prompt: "login",
      scope: ["https://saroujetmp.onmicrosoft.com/api/offline_access", "offline_access"]
    });

    return (
      <LoginView
        context={b2cLogin}
        onSuccess={this.onLoginSuccess.bind(this)}
      />
    );
  }
  onLoginSuccess(credentials) {
    console.log("onLoginSuccess");
    console.log(credentials);
    // use credentials.access_token..
  }
}

Answer 2

我正在使用React Native App Auth 这里

import React from 'react';
import { Button, View } from 'react-native';
import { authorize } from 'react-native-app-auth';

const config = {
  issuer: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=user-flow',
  clientId: 'Your-Client-ID',
  redirectUrl: 'com.yourapp://callback',
  scopes: ['openid', 'profile', 'offline_access'],
  serviceConfiguration: {
    authorizationEndpoint: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/v2.0/authorize?p=user-flow',
    tokenEndpoint: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/v2.0/token?p=user-flow',
    revocationEndpoint: 'https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/oauth2/v2.0/logout?p=user-flow'
  }
};

export default function App() {
  const login = async () => {
    try {
      const authState = await authorize(config);
      console.log('Access Token:', authState);
      // Handle the authenticated state
    } catch (error) {
      console.error('Login failed:', error);
    }
  };

  return (
    <View>
      <Button title="Login with Azure AD B2C" onPress={login} />
    </View>
  );
}