Flask-based three-party login process

Flowchart for third-party login

具体实现步骤：

1. Click the third-party icon on the front-end page,进行页面的跳转
2. Jump pages have DingTalk or yesQQLogin QR code,进行登录或注册
3. Information generation that is returned to the user of the backend servertoken,Then pass parameters to the front-end browser
4. 浏览器保存token信息,Verify next time you scan the codetokenLog in directly to third-party apps

举例：

The method of the front-end page：

        // qq登录
        QQ:function(){
            // var data = {}  //正规的写法
            // qq_login(data).then(resp=>{
            //     console.log('qq登录的响应',resp)
            //     if(resp.code==200){
            //      let url = resp.url
            //     console.log(url)
            //     window.location.href = url   
            //     }              
            // }).catch(err=>{
            // })
            //  https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=101474184&redirect_uri=http%3A%2F%2Fwww.meiduo.site%3A8080%2Foauth_callback.html&state=%2F&scope=get_user_info
            var app_id = '101474184'
            var app_key = 'c6ce949e04e12ecc909ae6a8b09b637c'
            var state = '/'
            // var redirect_uri = config['beasurl']+'qq'//'http://www.meiduo.site:8080/oauth_callback.html'
            var redirect_uri = 'http://www.meiduo.site:8080/oauth_callback.html'
            var url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id='+app_id+'&redirect_uri='
            +redirect_uri+'&state='+state+'&scope=get_user_info'

            window.location.href = url

flaskThe concrete implementation of the backend：

# 1.生成qq扫码登录的url,返回给前端用户
# 2.用户扫码,进行登录,qq对用户进行鉴权
# 3.The user confirms the login on the mobile phone,返回一个code,codeIt represents the information of successful login
# 4.code To return to the website,After the website is obtained, it is determined whether there is an account binding
    #1.linked account,直接登录成功
    #2.Account is not linked

class OauthUser(Resource):
    def get(self):
        """
        生成qq扫码登录的url,返回给前端用户
        :params: response_type=code # 扫码登录
        :params: state, redirect_uri
        :return:
        https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=9B93F12415BCB93941FDA383B66278470B75111C8D2BDC15474EF49E12D42E28F4FBBFC996B3C21250B8B7D1F915AA0A&client_id=100273020&redirect_uri=https%3A%2F%2Fqq.jd.com%2Fnew%2Fqq%2Fcallback.action%3Fview%3Dnull%26uuid%3D72a93e228e5c4386a2a743091db6e5fd
        """
        base_url = 'https://graph.qq.com/oauth2.0/authorize?'
        params = {
            'response_type': 'code',
            'client_id': current_app.config.get('QQ_APP_ID'),
            'redirect_uri': current_app.config.get('QQ_REDIRECT_URL'),
            'state': current_app.config.get('QQ_STATE'),
            'scope': 'get_user_info'  # 返回qq用户的openid
        }
        # urlencode will convert the dictionary to url的查询字符串
        data = urlencode(params)
        url = base_url + data
        return {'url':url,'code':200}

class QQUserinfo(Resource):
    def code_value(self,code):

        base_url='https://graph.qq.com/oauth2.0/token'

        if code:
            data ={
                'grant_type':'authorization_code',
                'client_id':current_app.config.get('QQ_APP_ID'),
                'client_secret':current_app.config.get('QQ_APP_KEY'),
                'code':code,
                'redirect_uri': current_app.config.get('QQ_REDIRECT_URL'),
            }
            resp = requests.request('GET',base_url,params=data)
            print('>>>>',resp)
            token_value =resp.text.split('&')[0][3]
            return token_value

    def get_openid(self,token_v):
    #     获取qq的openid
        base_url = 'https://graph.qq.com/oauth2.0/token'
        data = {'access_token': token_v}
        resp = requests.request('GET', base_url, params=data)
        user_dict = json.loads(resp.text)
        openid = user_dict['openid']
        return openid

    def get_qq_nickname(self,openid,token):
        base_url = 'https://graph.qq.com/user/get_user_info'
        data={
            'ouath_consumer_key':current_app.config.get('QQ_APP_ID'),
            'access_token':token,
            'openid':openid
        }
        resp =requests.request('GET',base_url,params=data)
        nick_name = json

    def get(self):
        parse = reqparse.RequestParser()
        parse.add_argument('code')
        args= parse.parse_args()
        code= args.get('code')
        print('>>>>',code)
        token_v= self.code_value(code)
        openid= self.get_openid(token_v)
        qq_nickname=self.get_qq_nickname(openid,token_v)

        return 'hhh'