Nail Authorized Third party web site scan Code Login

First, read the development documentation

First read the Nail Nail official development document, scan code login its practical is the official document description of the second way, will be nailed to the QR code embedded in their own page, users use nail code to scan the third-party website, the site can get nails user information.

Ii. preparatory work

You need a registered nail account to get appid;

You also need to login to the third-party website URL, as well as a website logo image address;

Specific steps:

1. After successful registration, log in and proceed as follows four steps to get AppID

　

2. Create some relevant information to fill in. Authorized logo address, suggest to put your website logo good.

3. The AppID and Appsecret will be generated after the confirmation is placed. The user's information will be used when the Appsecret is taken from behind the nail.

Third, follow the steps of the development document, implement the scan code login

1. First introduce the following JS file in the page

<src= "Http://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></  script>

2. Instantiating a JS object

• Add a div to the HTML page

• <id= "Login_container"></div>
  

• Instantiation of

• var obj = Ddlogin ({     ID: "Login_container",     goto: "Https://oapi.dingtalk.com/connect/oauth2/sns_ authorize?appid=AppID&response_type=code&scope=snsapi_login&state=state&redirect_ uri=Redirect_uri",     style:" Border:none;background-color: #FFFFFF; ",     width:" 365 ",     Height: "400"});

• Note that the code in the Red font section above, AppID is previously obtained, Redirect_uri is the last you want to jump to the third-party login site address. Go back and fetch it.

• Not finished, after the substitution is complete, goto: "", the part of the double quotation marks to do a whole UrlEncode code

3. Now you can instantiate and add the following code

var hanndlemessage = function (event) {        var origin = Event.origin;        Console.log ("origin", Event.origin);        if (origin = = "Https://login.dingtalk.com") {//Determines whether the event is from a Ddlogin sweep code.            var logintmpcode = event.data;//Get logintmpcode After you can construct jump link to jump            console.log ("Logintmpcode", Logintmpcode );
window.location.href=""+Logintmpcode

} };  if (typeof window.addeventlistener! = ' undefined ') {window.addeventlistener (' message ', Hanndlemessage, false);} else if (typeof window.attachevent! = ' undefined ') {window.attachevent (' onmessage ', hanndlemessage);}

4. Red double quotes in the value, see Official documents!!! The console will get the value of the Logintmpcode, but you want to construct the link Logintmpcode is a variable, to be stitched up, where the URL is not urlencode encoded. Then, you can test the page, you can see a QR code, with a nail scan code will let you confirm the login Web version of XXX. When you click OK, the console will output Logintmpcode, and the page will jump to your third-party website. Look up at your address bar at this time and there will be a code and state appended. Take the logintmpcode and code, and then read the nail pin user information to use these things.

Iv. user information to get nails

1. Request this address in the form of a GET request.

https://oapi.dingtalk.com/sns/gettoken?appid=appid&appsecret=appsecret

APPID and Appsecret look familiar?

2. OK, when you request success should return the following,Access_token value, we will take it and then obtain a permanent authorization code. Remember when we succeeded in scanning, jump to the URL of the third-party site, after it added a temporary authorization code code, this code and Access_token together to obtain a permanent authorization code.

{    "Errcode": 0,    "access_token": "7155d0dca6fa3a489462e4407699c339",    "errmsg": "OK"}

3. Obtain a permanent authorization code. Request this address as a POST request

HTTPs://oapi.dingtalk.com/sns/get_persistent_code?access_token=access_token 

The parameters of the post are as follows

{    "tmp_auth_code": "9282c00fed0a3e2a88fea069a9fe5be4"}

The value of Tmp_auth_code is the value of the code parameter appended to the URL. The request was successfully returned as follows

{    "Errcode": 0,    "errmsg": "OK",    "Unionid": "0wiiefptaf09fwcbg2iiygpwieie" ,    " OpenID":" Emuvn1jpipwiipltishbumvcwieie ",    "persistent_code":" Omooqk0peftxvjsmlzip8yu-iagk8-kjivy5od8-8y2ijlx367m9urnuvisdaptx "}

The value of the two red things requested, and then to get the user authorization of the Sns_token

4. Obtain a user-authorized Sns_token. Request this address as a POST request

https://oapi.dingtalk.com/sns/get_sns_token?access_token=Access_token

The first step of this access_token has been taken.

The pass parameters of the post are as follows

{    "OpenID": "Emuvn1jpipwiipltishbumvcwieie",    "persistent_code": " Omooqk0peftxvjsmlzip8yu-iagk8-kjivy5od8-8y2ijlx367m9urnuvisdaptx "}

It's a red thing, just picked up. Then the request is successfully returned as follows

{    "Errcode": 0,    "errmsg": "OK",    "sns_token": " ea1e12af6ac23a2080178bb9a452b312 ",    " expires_in ": 7200}

The last step, with the acquisition of the Sns_token to get user information, chicken frozen ~

5. Take user information. Request this address as a GET request

https://oapi.dingtalk.com/sns/getuserinfo?sns_token=Sns_token

The request was successfully returned as follows

Nail Authorized Third party web site scan Code Login