Azure B2C登录，react-web端实现，自定义登录页面ui

import React, { Component } from ‘react‘;
import Particles from ‘react-particles-js‘;
import { Form, Button } from ‘antd‘;
import { connect } from ‘react-redux‘;
import { setUserInfo } from ‘@/redux/actions/userInfo‘;
import ‘@/assets/css/login‘;
import * as Msal from ‘msal‘;

//获取当前域名‘
var url = ‘‘
function geturl() {
	const href = window.location.href
	console.log(href)
	var reg = new RegExp(/(\w+):\/\/([^/:]+)(:\d*)?/)
	let matchObj = href.match(reg)
	url = matchObj[0]
	// console.log(url,"--------url--------")
	// // this.locationUrl = url
};
geturl()
//B2C登录
var appConfig = {
	b2cScopes: ["https://XXX.onmschina.cn/api/demo.read"],//这些都要在B2C配置
	webApi: "http://localhost:5000/hello"
};
// configuration to initialize msal
const msalConfig = {
	auth: {
		clientId: "", //This is your client ID
		authority: "https://XXX.b2clogin.cn/XXX.onmschina.cn/B2C_1A_signup_signin_phone", //This is your tenant info
		validateAuthority: false,
	},
	cache: {
		cacheLocation: "localStorage",
		storeAuthStateInCookie: true
	}
};

// instantiate MSAL
const myMSALObj = new Msal.UserAgentApplication(msalConfig);
myMSALObj.handleRedirectCallback((error, response) => {
	console.log(response, error)
	if (response.idToken !== null) {
		localStorage.setItem(‘isLogin‘, ‘1‘);
		localStorage.setItem(‘menukey‘,[1])

		localStorage.setItem(‘token‘, response.idToken.rawIdToken);

		window.location.href = url+"/#/dashboard"
	}
	else {
		window.location.href = url+"/#/login"
	}

	// handle redirect response or error
});
// request to signin - returns an idToken
const loginRequest = {
	scopes: appConfig.b2cScopes
};

// request to acquire a token for resource access
const tokenRequest = {
	scopes: appConfig.b2cScopes
};

const FormItem = Form.Item;
class Login extends Component {
	state = { clientHeight: document.documentElement.clientHeight || document.body.clientHeight };
	constructor(props) {
		super(props);
		this.onResize = this.onResize.bind(this);
	}

	signIn() {
		myMSALObj.loginRedirect(appConfig.b2cScopes)
	}
	componentDidMount() {
		window.addEventListener(‘resize‘, this.onResize);
	}
	componentWillUnmount() {
		window.addEventListener(‘resize‘, this.onResize);
		// componentWillMount进行异步操作时且在callback中进行了setState操作时，需要在组件卸载时清除state
		this.setState = () => {
			return;
		};
	}
	onResize() {
		this.setState({ clientHeight: document.documentElement.clientHeight || document.body.clientHeight });
	}
	render() {
		const { getFieldDecorator } = this.props.form;
		return (
			<div className="container">
				<Particles
					height={this.state.clientHeight - 5 + ‘px‘}
					params={{
						particles: {
							line_linked: {
								color: "#77a3fc",
							},
							color: {
								value: "#77a3fc"
							},
							size: { value: 3 }
						},
						interactivity: {
							events: {
								onhover: { enable: true, mode: ‘repulse‘ }
							}
						}
					}}
				/>
				<div className="content1">
					<div className="logo1"><img src=‘‘ /></div>
					<div className="title1">欢迎使用ABB后台管理系统！</div>
					<Form className="login-form">

						<FormItem>
							<Button className="button1" type="danger" htmlType="submit" block onClick={this.signIn}>
								点击进入
							</Button>
							{/* <div style={{ color: ‘#999‘,paddingTop:‘10px‘,textAlign:‘center‘ }}>Tips : 输入任意用户名密码即可</div> */}
						</FormItem>
					</Form>
				</div>
			</div>
		);
	}
}

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => ({
	setUserInfo: data => {
		dispatch(setUserInfo(data));
	}
});
export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Form.create()(Login));

原文地址：https://www.cnblogs.com/baiyq/p/12426347.html