ddlogin-react

ddlogin for react

Installation

$ npm install ddlogin-react --save

Example Usage

importReactfrom'react'importDDloginfrom'ddlogin-react'exportdefaultclassLoginextendsReact.Component{constructor(props){super(props)this.state={// 测试 appidAPPID: 'dingoatk9pnaxugtzngq9l',// 跳转当前页面REDIRECT_URI: window.location.href}}componentWillMount(){// 触发回调时处理回调链接,举例：如果查询字符串中含有state,且为dinglogin（可自行设置）,// 则触发扫描登录的相应处理方法，比如登录。conststate=this.props.location&&this.props.location.query.state;if(state==='dinglogin'){constcode=this.props.location.query.code;// todo....// ex: dispatch(scanLogin({tmp_auth_code: code}));}}componentDidMount(){// 监听消息处理方法consthandleMessage=(event)=>{// 获取loginTempCodeconstloginTempCode=event.data;// 获取消息来源constorigin=event.origin;// 拼接 urlconsturl=`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.state.APPID}&response_type=code&scope=snsapi_login&state=dinglogin&redirect_uri=${this.state.REDIRECT_URI}&loginTmpCode=${loginTempCode}`// 如果来源为https://login.dingtalk.com，则在当前窗口打开回调链接if(origin==='https://login.dingtalk.com'){window.open(encodeURI(url),'_parent')}};// 监听iframe的消息if(typeofwindow.addEventListener!='undefined'){window.addEventListener('message',handleMessage,false);}elseif(typeofwindow.attachEvent!='undefined'){window.attachEvent('onmessage',handleMessage);}}render(){constoptions={id: "login-container",goto: `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.state.APPID}&response_type=code&scope=snsapi_login&state=dinglogin&redirect_uri=${this.state.REDIRECT_URI}`,width: '350px',height: '350px'}return(<divid="login"><h2>扫描登录</h2><DDloginoptions={options}/></div>)}}

Other

See more detail from Dingtalk Development Site

Licence

MIT License