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 (
			

				

					

					
欢迎使用ABB后台管理系统！
					

						
						
								点击进入
							
							{/* 
Tips : 输入任意用户名密码即可
 */}
						

				
			
		);
	}
}

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