钉钉扫码登录网站(两种方式实现)

简介: 钉钉扫码登录网站(两种方式实现)

钉钉扫码登录网站(两种方式实现)

效果:

源代码地址:https://github.com/jellydong/DingQrCodeLogin

动手敲代码!
第一步,钉钉后台配置

参考链接:获取appId及appSecret.

点击进入钉钉开发者平台 的页面,点击左侧菜单的【移动接入应用-登录】,然后点击右上角的【创建扫码登录应用授权】,创建用于免登过程中验证身份的appId及appSecret,创建后即可看到appId和appSecret。

这里因为我是本地开发,所以回调地址直接写:http://localhost:5000/Home/DingLogin

注意哦,回调地址后面是有使用的~

第二部 我们创建一个 ASP.NET Core Web项目
修改appsettings.json

修改appsettings.json,增加钉钉的配置信息:

  "DingDing": {
     "QrAppId": "QrAppId", //你的钉钉扫码登录AppId
    "QrAppSecret": "QrAppSecret" //你的钉钉扫码登录AppSecret
  }
创建完成修改Home控制器的Index页面其实就是钉钉官网文档的代码啦~
@{
    ViewData["Title"] = "Home Page";
}
 
<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <div id="login_container"></div>
    <button type="button" class="btn btn-primary" id="JumpToLogin">跳转登录</button>
</div>
 
 
@section Scripts
{
    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
    <script type="text/javascript">
        /*
        * 解释一下goto参数,参考以下例子:
        * var url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2');
        * var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
        */
        var url = "http://localhost:5000/Home/DingLogin";
        var obj = DDLogin({
            id: "login_container",//这里需要你在自己的页面定义一个HTML标签并设置id,例如<div id="login_container"></div>或<span id="login_container"></span>
            goto: encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + url), //请参考注释里的方式
            style: "border:none;background-color:#FFFFFF;",
            width: "365",
            height: "400"
        });
 
        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);
 
                window.location.href =
                    "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=" +
                    loginTmpCode;
            }
        };
        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', handleMessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', handleMessage);
        }
 
        $("#JumpToLogin").click(function(){
            window.location.href =
                "https://oapi.dingtalk.com/connect/qrconnect?appid=appid&response_type=code&scope=snsapi_login&state=LoginDing&redirect_uri=http://localhost:5000/Home/DingLogin";
        });
    </script>
}

官网介绍了两种方式,Demo把两种方式都放到一个页面了。登录页面效果:


第三步 回调方法:

第一步的时候我们说回调地址是需要使用的,那么首先我们要有这个地址啊。

因为是Demo,就直接写在HomeController中了

 public string DingLogin(string code, string state)
        {
            //state 是前端传入的,钉钉并不会修改,比如有多种登录方式的时候,一个登录方法判断登录方式可以进行不同的处理。
 
            OapiSnsGetuserinfoBycodeResponse response = new OapiSnsGetuserinfoBycodeResponse();
            try
            {
                string qrAppId= AppConfigurtaionHelper.Configuration["DingDing:QrAppId"];
                string qrAppSecret = AppConfigurtaionHelper.Configuration["DingDing:QrAppSecret"];
                if (string.IsNullOrWhiteSpace(qrAppId)||string.IsNullOrWhiteSpace(qrAppSecret))
                {
                    throw new Exception("请先配置钉钉扫码登录信息!");
                }
 
                DefaultDingTalkClient client = new DefaultDingTalkClient("https://oapi.dingtalk.com/sns/getuserinfo_bycode");
                OapiSnsGetuserinfoBycodeRequest req = new OapiSnsGetuserinfoBycodeRequest();
                req.TmpAuthCode = code;
                response = client.Execute(req, qrAppId, qrAppSecret); 
 
                //获取到response后就可以进行自己的登录业务处理了
 
                //xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                //此处省略一万行代码
 
 
            }
            catch (Exception e)
            {
                response.Errmsg = e.Message;
            }
 
            return response.Body;
        }
登录结果

完成上述步骤后,我们就可以运行项目测试了,钉钉会给我们返回用户的nickopenidunionid,那么,我们可以用这些信息,为所欲为了?

总结

之前过于钉钉扫码,总觉得是很高大上的东西(原谅我是个菜鸡),也没有去尝试。

今天看完文档后,用在项目上,然后写了这个Demo,因为我Github没找到合适的,可能是大家觉得简单都不用写了。

1024 节日快乐!

相关文章
|
6月前
|
Java
钉钉第三方扫码登录提示 code: 403, 没有调用该接口的权限,接口权限申请参考
钉钉第三方扫码登录提示 code: 403, 没有调用该接口的权限,接口权限申请参考 ,但是我明明申请了Contact.User.Read 这个权限
240 1
|
前端开发 开发者 容器
Web站,前端接入钉钉扫码登录!
Web站,前端接入钉钉扫码登录!
|
1月前
|
运维 IDE Java
云效产品使用报错问题之使用钉钉扫码登录云效,出现“因机型不匹配建议更换”如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
1月前
|
安全
钉钉扫码登录不跳转的情况,可能有以下几种原因:
钉钉扫码登录不跳转的情况,可能有以下几种原因:
552 3
|
移动开发 Java 数据安全/隐私保护
钉钉一键登录第三方网站
钉钉一键登录第三方网站,这里主要记录一键登录整个实现步骤。登录页面构造好钉钉一键登录链接后的页面效果。
钉钉一键登录第三方网站
|
Java Spring 容器
@ConditionalOnProperty控制钉钉扫码登录逻辑
云巧4A组件应用于某项目,而该项目采购的是浙政钉,因此在4A组件需要实现浙政钉扫码登录。该功能与4A组件中的公版钉扫码登录逻辑类似,可以直接复用接口,而且由于同一个项目中公版钉和专有钉不会出现同时存在的情况,因此可以通过配置参数来决定在不同项目中使用哪种逻辑。
328 0
@ConditionalOnProperty控制钉钉扫码登录逻辑
|
SQL Shell 数据库
【Django | 开发】面试招聘信息网站(划分面试官权限&集成钉钉消息)
【Django | 开发】面试招聘信息网站(划分面试官权限&集成钉钉消息)
【Django | 开发】面试招聘信息网站(划分面试官权限&集成钉钉消息)
|
Java 开发工具 开发者
基于springboot架构 钉钉扫码登录第三方应用
• 获取appId及appSecret • 项目应用 • 1.配置文件增加如下配置 • 2.下载sdk • 3.将sdk引入项目 • 3.修改登录跳转方法/login • 4.登录页修改 • 5.扫码重定向实现登录的方法如下 • 6.重写UsernamePasswordToken
基于springboot架构 钉钉扫码登录第三方应用
|
Java
钉钉第三方网站扫码登录及钉钉工作台自动免登操作
钉钉扫码免登以及应用自动登录?
2125 0
钉钉第三方网站扫码登录及钉钉工作台自动免登操作
|
存储 弹性计算 安全
成功案例-钉钉 | 学习笔记
快速学习 成功案例-钉钉
313 0

热门文章

最新文章