前端工作总结228-第三方登录请求参考

<style>
    body{
        overflow:hidden;
    }
    .login-box {
        margin-top: -10rem;
        padding: 5px;
    }
 
    .card {
        border-radius: .45rem
    }
 
    .form-group {
        text-align: left;
    }
</style>
<div class="login-page bg-40" style="display:none;">
    <div class="login-box">
        <div class="card">
            <div class="card-body login-card-body shadow-100">
                <p class="login-box-msg mt-1 mb-1">{{ __('admin.welcome_back') }}</p>
                <form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                    <input type="hidden" id="local_url" name="local_url" value="{{env('DING_LOCAL_URL')}}">
                    <input type="hidden" id="app_id" name="app_id" value="{{env('DING_APP_ID')}}">
                    <input type="hidden" id="qrcode_url" name="qrcode_url" value="{{env('DING_MESSAGE_URL')}}">
                    <fieldset class="form-label-group form-group position-relative has-icon-left">
                        <input
                            type="text"
                            class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                            name="username"
                            placeholder="{{ trans('admin.username') }}"
                            value="admin"
                            required
                            autofocus
                        >
                    </fieldset>
                    <fieldset class="form-label-group form-group position-relative has-icon-left">
                        <input
                            minlength="5"
                            maxlength="20"
                            id="password"
                            type="password"
                            class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                            name="password"
                            placeholder="{{ trans('admin.password') }}"
                            required
                            autocomplete="current-password"
                            value="admin"
                        >
                    </fieldset>
                    <div class="form-group d-flex justify-content-between align-items-center">
                        <div class="text-left">
                            <fieldset class="checkbox">
                                <div class="vs-checkbox-con vs-checkbox-primary">
                                    <input id="remember" name="remember" value="1"
                                           type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary float-right login-btn">
                        {{ __('admin.login') }}
                        <i class="feather icon-arrow-right"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="login-page" style="background-image:url(/images/bg-image.jpg); background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;">
    <div class="login-box" style="position:absolute;right:50px;top:350px;">
        <div class="card row">
{{--            <div class="" style="text-align: center;font-size: 24px;width:100%;margin-top:10px">--}}
{{--                <div class="user col-5" style="color:red;border:1px solid #909090">用户</div>--}}
{{--                <div class="leader col-5" style="border:1px solid #909090">管理员</div>--}}
{{--            </div>--}}
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item col-6" style="text-align: center" role="presentation">
                    <a style="font-size:1.5rem" class="nav-link active" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="true">员工登录</a>
                </li>
                <li class="nav-item col-6" style="text-align: center" role="presentation">
                    <a style="font-size:1.5rem" class="nav-link" id="leader-tab" data-toggle="tab" href="#leader" role="tab" aria-controls="leader" aria-selected="false">管理员登录</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="login_content user-logo tab-pane fade show active" id="user" role="tabpanel" aria-labelledby="home-tab" style="margin-top: 10px; border: none; background-color: rgb(255, 255, 255);border-radius: 5px;margin: auto;overflow: hidden;position: relative;height: 386px">
                    <div class="login_body" style="text-align: center;">
                        <div class="login_qrcode">
                            <div class="login_qrcode_content" style="text-align: center;height: 210px;width: 210px;margin: auto;margin-top: 40px;" id="qrcode" title="">
                                <div id="output"></div>
                            </div>
                            <div class="login_qrcode_text" style="margin-top: 20px;text-align: center;color: #898d90;font-size: 14px;">
                                请使用钉钉扫描二维码登录
                            </div>
                        </div>
                    </div>
                </div>
                <div class="leader-logo tab-pane fade" role="tabpanel" aria-labelledby="leader-tab" id="leader" style="margin-left: 15px">
                    <form id="login-form1" method="POST">
                        <div id="login_container"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
 
 
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<script src="/js/jquery.qrcode.min.js"></script>
<script>
    Dcat.ready(function () {
        let qrcode_url = $('#qrcode_url').val();
        let _this = this;
        let uurl = '';
        let app_id = $('#app_id').val();
        let local_url = $('#local_url').val();
        let url = encodeURIComponent(local_url);
        let goto = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid="+app_id+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + url);
        var obj = DDLogin({
            id: "login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
            goto: goto, //请参考注释里的方式
            style: "margin-top:10px;border:none;background-color:#FFFFFF;",
            width: "350",
            height: "380"
        });
        var handleMessage = function (event) {
            var origin = event.origin;
            console.log("origin", event.origin);
            if (origin == "https://login.dingtalk.com") { //判断是否来自ddLogin扫码事件。
                var loginTmpCode = event.data;
                //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
                // console.log("loginTmpCode", loginTmpCode);
                $('.login-btn').click();
                uurl = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid="+app_id+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + url + "&loginTmpCode=" + loginTmpCode;
                // window.location.href = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid="+app_id+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + url + "&loginTmpCode=" + loginTmpCode;
            }
        };
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', handleMessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', handleMessage);
        }
        // ajax表单提交
        $('#login-form').form({
            validate: true,
            success: function (data) {
                if (!data.status) {
                    Dcat.error(data.message);
                    return false;
                }
                // Dcat.success(data.message);
                location.href = uurl;
                return false;
            }
        });
 
        $(function(){
            $('#output').qrcode({
                render: "canvas", //也可以替换为table
                width: 210,
                height: 210,
                text: qrcode_url
            });
        })
        $(".user").click(function () {
            $('.user').css('color','red');
            $('.leader').css('color','black');
            $('.leader-logo').css('display','none');
            $('.user-logo').css('display','block');
        });
        $(".leader").click(function () {
            $('.leader').css('color','red');
            $('.user').css('color','black');
            $('.user-logo').css('display','none');
            $('.leader-logo').css('display','block');
        });
    });
</script>