Prefacio
Continuación del ciclo de trabajo con Azure B2C. En este artículo hablaré sobre cómo habilitar la autenticación en React JS.Enlaces a publicaciones relacionadasPASO 1
Debe instalar react-aad-msal (npm i react-aad-msal) .Agregue un archivo auth.html vacío al directorio públicoPASO 2
Cree el archivo auth-provider.ts en la carpeta ./srcTambién debe verificar que en Azure B2C, los permisos de administrador para openid y perfil se otorgan en la pestaña Permisos de API .
import { MsalAuthProvider, LoginType } from 'react-aad-msal';
import { Configuration } from 'msal/lib-commonjs/Configuration';
export const config = (azurePolicy: string): Configuration => ({
auth: {
authority: `https://yourcompany.b2clogin.com/yourcompany.onmicrosoft.com/${azurePolicy}`,
validateAuthority: false,
clientId: '777aaa77a-7a77-7777-bb77-8888888aabc',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: false,
},
});
const authenticationParameters = {
scopes: [
'https://myapp.onmicrosoft.com/777aaa77a-7a77-7777-bb77-8888888aabc/openid',
'https://myapp.onmicrosoft.com/777aaa77a-7a77-7777-bb77-8888888aabc/profile',
],
};
export const options = {
loginType: LoginType.Redirect,
tokenRefreshUri: `${window.location.origin}/auth.html`,
};
export const authProvider = (customConfig: Configuration): MsalAuthProvider => new MsalAuthProvider(customConfig, authenticationParameters, options);
Dónde obtener los nombres de las políticas que puede ver en la captura de pantalla
PASO 3
En el archivo index.tsx, debe procesar las secuencias de comandos mediante las cuales el usuario ingresará a su aplicación. import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { AzureAD, AuthenticationState, IAzureADFunctionProps } from 'react-aad-msal';
import { authProvider, config } from './auth-provider';
import App from './App';
const store = configureStore();
const unauthenticatedFunction = () => (
<AzureAD provider={authProvider(config('B2C_1A_PasswordReset'))}>
{
({
login, logout, authenticationState, error, accountInfo,
}: IAzureADFunctionProps): React.ReactElement | void => {
switch (authenticationState) {
default:
login();
return <h1>Loading...</h1>;
}
}
}
</AzureAD>
);
ReactDOM.render(
<Provider store={store}>
//
<AzureAD provider={authProvider(config('B2C_1A_signup_signin'))} reduxStore={store}>
{
({
login, logout, authenticationState, error, accountInfo,
}: IAzureADFunctionProps): React.ReactElement | void => {
switch (authenticationState) {
case AuthenticationState.Authenticated:
console.log(accountInfo); // + JWT Token
return <App />;
case AuthenticationState.Unauthenticated:
if (!accountInfo && !error) {
login();
}
if (!accountInfo && error) {
//
// AADB2C90118
if (error.errorMessage.includes('AADB2C90118')) {
return unauthenticatedFunction();
}
// ,
// ( " " "")
if (error.errorMessage.includes('AADB2C90091')) {
login();
}
}
console.log('ERROR', error);
return <h1>Not authorized</h1>;
case AuthenticationState.InProgress:
return <h1>In progress</h1>;
default:
return <h1>Default</h1>;
}
}
}
</AzureAD>
</Provider>,
document.getElementById('root'),
);
registerServiceWorker();
PASO 4
Vaya a Azure AD B2C en la pestaña "Registro de la aplicación" y seleccione la aplicación que desea usar, excepto:IdentityExperienceFramework y ProxyIdentityExperienceFramework .Si no ha creado la aplicación, vaya al paso "Secuencias de usuario básicas".
A continuación, vaya a la autenticación y agregue los siguientes URI:
Conclusión
Como resultado del trabajo realizado, al descargar la aplicación, el usuario será transferido a la página de autorización.¡Gracias por la atención!