|
|
@@ -0,0 +1,53 @@
|
|
|
+<template>
|
|
|
+ <div class="ding-login" id="dd_login_container"></div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { onMounted, onUnmounted } from 'vue';
|
|
|
+ const appId = import.meta.env.VITE_APP_DING_APP_ID;
|
|
|
+ const url = encodeURIComponent('http://59.110.6.97:10619');
|
|
|
+ const goto = encodeURIComponent(
|
|
|
+ `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appId}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=` + url
|
|
|
+ );
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ DDLogin({
|
|
|
+ id: 'dd_login_container', //这里需要你在自己的页面定义一个HTML标签并设置id,例如<div id="login_container"></div>或<span id="login_container"></span>
|
|
|
+ goto: goto, //请参考注释里的方式
|
|
|
+ style: 'border:none;background-color:#FFFFFF;',
|
|
|
+ width: '300',
|
|
|
+ height: '300',
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ const handleMessage = (event) => {
|
|
|
+ let origin = event.origin;
|
|
|
+ if (origin == 'https://login.dingtalk.com') {
|
|
|
+ //判断是否来自ddLogin扫码事件。
|
|
|
+ let loginTmpCode = event.data;
|
|
|
+ //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
|
|
|
+ const targetUrl = goto + `#/sso?code=${loginTmpCode}&state=STATE`;
|
|
|
+ window.location.href = targetUrl;
|
|
|
+ }
|
|
|
+ };
|
|
|
+ if (typeof window.addEventListener != 'undefined') {
|
|
|
+ window.addEventListener('message', handleMessage, false);
|
|
|
+ } else if (typeof window.attachEvent != 'undefined') {
|
|
|
+ window.attachEvent('onmessage', handleMessage);
|
|
|
+ }
|
|
|
+
|
|
|
+ onUnmounted(() => {
|
|
|
+ if (typeof window.removeEventListener != 'undefined') {
|
|
|
+ window.removeEventListener('message', handleMessage);
|
|
|
+ } else if (typeof window.detachEvent != 'undefined') {
|
|
|
+ window.detachEvent('onmessage', handleMessage);
|
|
|
+ }
|
|
|
+ });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .ding-login {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+</style>
|