QQ Bound account login (from www.sysoft.cc)

Source: Internet
Author: User
Tags openid

Application of QQ Third party login
The application of this third-party login is now extensive and convenient. It saves the user from registering. Now QQ login methods and procedures to record, in case of convenient use.

The first step, to http://connect.qq.com/intro/login/here to apply for QQ login, add their own information. Follow the steps to the line. What is to say, is the callback address, here just write the domain name on the line, nothing else, and you add to write the main domain name, sub-domain can also be used, the format is generally the case, www.sohu.com this format, note that the front do not have http://.

After the application is successful, you will get an app ID and a key. Only these two values are in order for you to perform the following steps.

The second step, after the application is completed, you will need to add the corresponding login button and callback page parameters in your site page.

Here first to say the callback page, literally is very good understanding, that is, after logging in QQ, QQ gives you the return value of the receiving page, this page can be a separate page, you can also and login page is a.

QQ provides us with the simplest jssdk. We just have to call it a little bit.

1, in the need to join the QQ Login Button page introduced JS SDK Library

        

<script type= "Text/javascript" src= "Http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
Data-appid= "AppID" data-redirecturi= "Redirecturi" charset= "Utf-8" >
</script>
The above code, put in between The data-appid here is your application AppID write it in, Data-redirecturi this is the address of the callback page. The general wording is as follows http://www.sohu.com/Default.aspx this Default.aspx page is to receive QQ login after the return value of the page, of course, your login page and return page can also be a

2, in the HTML page need to insert the QQ login button location, paste the following sample code

         

<span id= "Qq_login_btn" ></span>
<script type= "Text/javascript" >
Qc. Login ({//press the default style to insert the QQ login button
Btnid: Node ID for "QQ_LOGIN_BTN"//Insert button
});
</script>

Here QQ has given a well-defined QQ login button, of course, you can also define Http://wiki.opensns.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91JS_SDK %e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e#3._. E8.87.aa.e5.ae.9a.e4.b9.89.e7.99.bb.e5.bd.95.e6.8c.89.e9.92.ae This address is to show you how to customize a login button that is the same as your website style

Here, your login page, add something is OK, below to see your callback page

The third step, the callback page processing

1, JS SDK callback Address page, insert the following sample code on the callback address page

<script type= "Text/javascript" src= "Http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset= "Utf-8" Data-callback= "true" ></script>
As in the second step, put this code in the

2, is to call the corresponding method of the JS SDK, to obtain the information you want to know, generally speaking, we want to get information, at most is the user nickname and User login success, QQ to US return user unique identification. All we have to do is get these two values, and everything will be all right.

Get nickname

<script type= "Text/javascript" >
Collect Openapi necessary parameters from the page. Get_user_info does not require input parameters, so there are no parameters in paras
var paras = {};

Invoking Openapi with the JS SDK
Qc.api ("Get_user_info", paras)
Specifies that the interface accesses a successful receive function, s for successful return of the response object
. Success (function (s) {
Successful callback to get Openapi return data via S.data
Alert ("Get user information successful! The current user nickname is: "+s.data.nickname);
})
Specifies that the interface fails to access the receive function, and F returns the response object for failure
. Error (function (f) {
Failure callback
Alert ("Failed to get user information!") ");
})
Specifies the receive function after the interface completes the request, and C returns the response object for the completion request
. complete (function (c) {
Completing the request callback
Alert ("Get user information done! ");
});
</script>
Get OpenID and Accesstoken:

After the user login through "QQ Login" successfully, you can call the sample code to get to OpenID and Accesstoken

OpenID is the unique identity of the user and can be saved locally so that the user can correspond to their previous identity at the next logon and does not require a re-authorization. Accesstoken is the login status and authorization information for the current user on this site/app, or it can be saved locally.

<script type= "Text/javascript" >
if (QC. Login.check ()) {//if logged in
Qc. Login.getme (function (openId, Accesstoken) {
Alert (["Current logged-in user's", "OpenId:" +openid, "Accesstoken:" +accesstoken].join ("\ n"));
});
You can call your own save interface here.
//...
}
</script>

Here is a page of my test. Code

Default.aspx

<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Wirelesscity_web.default"% >

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<title></title>
<script src= "/js/jquery-1.4.2.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" src= "Http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid= " 100359262 "data-redirecturi=" http://b.am89.com/Default.aspx "charset=" Utf-8 "></script>
<script type= "Text/javascript" src= "Http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset= "Utf-8" Data-callback= "true" ></script>
<body>
<form id= "Form1" runat= "Server" >




<span id= "Qqloginbtn" ></span>
<script type= "Text/javascript" >
Qc. Login ({
Btnid: Node ID for "QQLOGINBTN"//Insert button

});



</script>

<script type= "Text/javascript" >
Collect Openapi necessary parameters from the page. Get_user_info does not require input parameters, so there are no parameters in paras
var paras = {};

Invoking Openapi with the JS SDK
Qc.api ("Get_user_info", paras)
Specifies that the interface accesses a successful receive function, s for successful return of the response object
. Success (function (s) {
Successful callback to get Openapi return data via S.data
Alert ("Get user information successful! The current user nickname is: "+ s.data.nickname);
})
Specifies that the interface fails to access the receive function, and F returns the response object for failure
. Error (function (f) {
Failure callback
Alert ("Failed to get user information!") ");
})
Specifies the receive function after the interface completes the request, and C returns the response object for the completion request
. complete (function (c) {
Completing the request callback
Alert ("Get user information done! ");
});
</script>

<script type= "Text/javascript" >
if (QC. Login.check ()) {//if logged in
Qc. Login.getme (function (openId, Accesstoken) {
Alert (["Current Logged on user", "OpenID:" + OpenID, "Accesstoken:" + accesstoken].join ("\ n"));
$ ("#hidopenId"). attr ("value", openId);
$ ("#hidaccessToken"). attr ("value", Accesstoken);
});
You can call your own save interface here.
//...
}

function Contadd () {
var openId = $ ("#hidopenId"). Val ();
var Accesstoken = $ ("#hidaccessToken"). Val ();

$.ajax ({
Type: "POST",
URL: "Ajaxbackinfo.aspx",
Data: "openid=" + openId + "&accesstoken=" + Accesstoken + "",
Success:function (Result) {
Alert ("AA" + result);
}
});
}
</script>


</div>

<asp:hiddenfield id= "Hidopenid" runat= "Server"/>
<asp:hiddenfield id= "Hidaccesstoken" runat= "Server"/>
<br/>
<input type= "button" value= "Submit" id= "Btnsubmit" onclick= "Contadd ();"/>
</form>
</body>

Ajaxbackinfo.aspx

[CSharp] View plaincopy

Using System;
Using System.Collections.Generic;
Using System.Linq;
Using System.Web;
Using System.Web.UI;
Using System.Web.UI.WebControls;

Namespace Wirelesscity_web
{
public partial class AjaxbackInfo:System.Web.UI.Page
{
protected void Page_Load (object sender, EventArgs e)
{
String OpenID = request.form["OpenID"]?? request.querystring["OpenId"];
String accesstoken = request.form["Accesstoken"]?? request.querystring["Accesstoken"];

Response.Write ("OpenID:" + OpenID + "Accesstoken:" + Accesstoken);
Response.End ();
}
}
}

QQ Bound account login (from www.sysoft.cc)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.