如何使用 DRF 作为后端和 angularjs 作为前端和 DRF return jwt 令牌进行社交登录以进行进一步交互

Question

我使用 angularjs 作为前端，使用 djnago rest frame(DRF) 作为后端。我想为我的网站进行社交登录。

要求

用户使用该应用程序登录 FB/Google。
FB/Google returns 一个 access_token.
应用程序使用 POST 将此 access_token 发送到 Django 后端请求。
Django 后端找到与此 FB 帐户关联的用户或使用来自 FB 的名字、姓氏和电子邮件创建一个新的帐号。
Django returns 用于进一步身份验证的 JWT 令牌。
JWT 以 cookie 的形式保存在浏览器中。
接下来，应用程序使用此 JWT 对用户进行身份验证，然后不再使用需要FB登入。

请帮我做这个..

Answer 1

我建议您使用 Sattelizer 是一个 angulajs 库，用于将 JWT 与社交登录一起使用这是一个示例 with python（该示例使用 Flask，但您可以在 django 中应用相同的逻辑）

我在 django 中使用了这个

from rest_framework_jwt.settings import api_settings
from rest_framework.views import APIView
from rest_framework import status
from rest_framework.response import Response
from django.contrib.auth.models import User
from django.shortcuts import get_object_or_404
from modules.Pacientes.models import Paciente
from modules.Doctores.models import Doctor
from urllib.parse import parse_qs, parse_qsl
from django.conf import settings
import json
import requests
from .utils import *
import uuid

JWT_PAYLOAD = api_settings.JWT_PAYLOAD_HANDLER
JWT_ENCODE = api_settings.JWT_ENCODE_HANDLER


class AuthGoogle(APIView):
    def post(self, request):

        data = dict(client_id=request.data['clientId'],
                    redirect_uri=request.data['redirectUri'],
                    client_secret=settings.GOOGLE_SECRET,
                    code=request.data['code'],
                    grant_type='authorization_code')
        print(data)
        print(settings.ACCESS_TOKEN_URL)
        # Obteniendo Access Token
        r = requests.post(settings.ACCESS_TOKEN_URL, data=data)
        token = json.loads(r.text)
        print(token)
        headers = {'Authorization': 'Bearer {0}'.format(token['access_token'])}

        # Obteniendo datos de perfil

        r = requests.get(settings.PEOPLE_API_URL, headers=headers)

        profile = json.loads(r.text)

        print(profile['email'])

        try:
            user = User.objects.get(email=profile['email'])
        except User.DoesNotExist:
            user = None

        if user:
            payload = JWT_PAYLOAD(user)
            token = JWT_ENCODE(payload)
            return Response({'token': token}, status.HTTP_200_OK)

        else:
            user = User.objects.create_user(username=profile['given_name'], email=profile["email"], password="nexo2016")
            paciente = Paciente(user=user, pic_profile=profile['picture'], google_sub=profile['sub'])
            paciente.save()
            send_email_welcome(user)
            payload = JWT_PAYLOAD(user)
            token = JWT_ENCODE(payload)
            return Response({'token': token}, status.HTTP_201_CREATED)


class AuthFacebook(APIView):
    def post(self, request):

        data = dict(client_id=request.data['clientId'],
                    redirect_uri=request.data['redirectUri'],
                    client_secret=settings.FACEBOOK_SECRET,
                    code=request.data['code'],
                    )
        r = requests.get(settings.ACCESS_TOKEN_URL_FACEBOOK, params=data)
        access_token = json.loads(r.text)
        print(r.text)
        r = requests.get(settings.GRAPH_API_URL, params=access_token)
        print(r.text)
        profile = json.loads(r.text)

        try:
            user = User.objects.get(email=profile['email'])
        except User.DoesNotExist:
            user = None

        if user:
            payload = JWT_PAYLOAD(user)
            token = JWT_ENCODE(payload)
            return Response({'token': token}, status.HTTP_200_OK)
        else:
            user = User.objects.create_user(username=profile['name'], email=profile['email'],
                                            first_name=profile['first_name'], last_name=profile['last_name'])
            paciente = Paciente(user=user,
                                pic_profile='https://graph.facebook.com/' + profile['id'] + '/picture?type=normal',
                                facebook_id=profile['id'])
            paciente.save()
            send_email_welcome(user)
            payload = JWT_PAYLOAD(user)
            token = JWT_ENCODE(payload)
            return Response({'token': token}, status.HTTP_201_CREATED)

        return Response(request.data, status.HTTP_500_INTERNAL_SERVER_ERROR)

希望对您有所帮助

如何使用 DRF 作为后端和 angularjs 作为前端和 DRF return jwt 令牌进行社交登录以进行进一步交互

how to make social login with DRF as backend and angularjs as frontend and DRF return jwt token for further interaction

django

django-socialauth

angularjs

django-rest-framework

google-signin

要求