釘釘掃碼登陸網站(兩種方式實現)

釘釘掃碼登陸網站(兩種方式實現)

效果：

源代碼地址：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;
        }

登陸結果

完成上述步驟後，咱們就能夠運行項目測試了，釘釘會給咱們返回用戶的nick、openid及unionid，那麼，咱們能夠用這些信息，隨心所欲了？

總結

以前過於釘釘掃碼，總以爲是很高大上的東西(原諒我是個菜雞),也沒有去嘗試。 今天看完文檔後，用在項目上，而後寫了這個Demo,由於我Github沒找到合適的，多是你們以爲簡單都不用寫了。

1024 節日快樂！

原文出處：https://www.cnblogs.com/jellydong/p/11732509.html