In diesem Artikel werden wir eine Flask-Anwendung erstellen, die das OAuth-Protokoll verwendet, um Benutzerinformationen abzurufen. Zunächst müssen wir das OAuth-Protokoll und seine Vorgehensweise verstehen.

Was ist OAuth?

OAuth steht für Open Authorization und wurde implementiert, um eine Verbindung zwischen Online-Diensten herzustellen. Die OAuth Community Site definiert es als „ ein offenes Protokoll, um eine sichere Autorisierung in einer einfachen und standardmäßigen Methode von Web-, Mobil- und Desktop-Anwendungen zu ermöglichen. “. Ein beliebtes Beispiel für OAuth wäre die Schaltfläche „Mit Google anmelden“, die auf verschiedenen Websites vorhanden ist. Hier verbindet sich der Website-Dienst mit dem Google-Dienst, um Ihnen eine einfache Möglichkeit zu bieten, Ihre Ressource für den gewünschten Dienst zu autorisieren. Es gibt jetzt zwei Versionen von OAuth OAuth1.0 und OAuth2.0.

Terminologien in OAuth

  • Client: Es ist die Anwendung oder der Dienst, der versucht, sich mit dem anderen Dienst zu verbinden.
  • Anbieter: Dies ist der Dienst, mit dem sich der Client verbindet.
  • Autorisierungs - URL: Dies ist die vom Anbieter bereitgestellte URL, an die der Client Requestsn sendet.
  • Client ID und Secret:  Wird vom Anbieter bereitgestellt und verwendet, wenn die Autorisierungsrequests vom Client an den Anbieter gesendet wird.
  • Autorisierungscode: Dies ist ein Code, der bei erfolgreicher Authentifizierung durch den Benutzer vom Client abgerufen und an den Autorisierungsserver des Anbieters gesendet wird.
  • Rückruf-URL: Dies ist die vom Client festgelegte URL, an die der Anbieter den Autorisierungscode sendet und die Benutzerressourcen vom Client-Dienst abgerufen werden.

Schritte zum Einrichten von OAuth

Schritt 1: Registrieren Sie Ihre Anwendung als Client auf der Website des Anbieters. Sie erhalten die Client-Anmeldeinformationen, die die Client-ID und das Client-Geheimnis enthalten.

Schritt 2: Die Clientanwendung sendet eine Autorisierungsrequests an die Autorisierungs-URL des Anbieters.

Schritt 3: Der Benutzer authentifiziert sich auf der Seite des Anbieters und erlaubt die Nutzung von Ressourcen durch den Client-Service.

Schritt 4: Der Anbieter sendet den Autorisierungscode an den Kunden

Schritt 5: Der Client sendet den Autorisierungscode an den Autorisierungsserver des Anbieters.

Schritt 6: Der Anbieter sendet die Client-Tokens, die für den Zugriff auf Benutzerressourcen verwendet werden können.

Jetzt, da das Konzept von OAuth klar ist, können wir mit dem Erstellen unserer Anwendung beginnen. Uns stehen verschiedene Bibliotheken zur Verfügung, mit denen OAuth erreicht werden kann. Die Bibliothek, die wir verwenden werden, ist AuthLib, die OAuth 1.0 und OAuth 2.0 unterstützt.

Erforderliche Abhängigkeiten installieren

Um die erforderlichen Abhängigkeiten zu installieren, geben Sie den folgenden Befehl im Terminal ein.

pip install -U Flask Authlib requests

Hinweis: Es wird empfohlen, vor der Installation dieser Abhängigkeiten eine virtuelle Umgebung zu erstellen.

Rufen Sie die Clientanmeldeinformationen von den Anbietern ab

  • Google: Erstellen Sie Ihren Google OAuth-Client unter https://console.cloud.google.com/apis/credentials, stellen Sie sicher, dass Sie http://localhost:5000/google/auth/ zu Authorized Redirect URIs hinzufügen.
  • Twitter: Erstellen Sie Ihren Twitter Oauth 1.0-Client unter https://developer.twitter.com/, indem Sie eine App erstellen. Fügen Sie http://localhost:5000/twitter/auth/ zu Authorized Redirect URIs hinzu.
  • Facebook: Erstellen Sie Ihren Facebook-OAuth-Client unter https://developer.facebook.com/, indem Sie eine App erstellen. Fügen Sie http://localhost:5000/facebook/auth/ zu Authorized Redirect URIs hinzu.

Die Client-Anmeldeinformationen können direkt im Programm verwendet werden, aber in der tatsächlichen Produktion müssen diese Anmeldeinformationen in Umgebungsvariablen gespeichert werden.

Erstellen Sie die Benutzeroberfläche 

Erstellen Sie einen Ordner namens templates und erstellen Sie darin eine index.html-Datei. Fügen Sie den folgenden Code in die Datei index.html ein. Es ist ein einfacher Code, der Schaltflächen für jeden Anbieter erstellt.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Authlib Connect</title>
   </head>
   <body>
      <p align="center">
         <a href="google/">
         <img id="google"
            src="https://img.shields.io/badge/Google-Connect-brightgreen?style=for-the-badge&labelColor=black&logo=google"
            alt="Google"> <br>
         </a>
         <a href="twitter/">
         <img id="twitter"
            src="https://img.shields.io/badge/Twitter-Connect-brightgreen?style=for-the-badge&labelColor=black&logo=twitter"
            alt="Twitter"> <br>
         </a>
         <a href="facebook/">
         <img id="facebook"
            src="https://img.shields.io/badge/Facebook-Connect-brightgreen?style=for-the-badge&labelColor=black&logo=facebook"
            alt="Facebook"> <br>
         </a>
      </p>
 
 
   </body>
</html>

Erstellen der Flask-App

Initialisieren Sie die Flaschenanwendung

Lassen Sie uns eine einfache Flask-Anwendung erstellen, die nichts tut und einfach die oben erstellte HTML-Datei auf der Homepage rendert.

Python3

from flask import Flask, render_template
 
 
app = Flask(__name__)
 
app.secret_key = '\xfd{H\xe5<\x95\xf9\xe3\x96.5\xd1\x01O<\
!\xd5\xa2\xa0\x9fR"\xa1\xa8'
 
'''
    Set SERVER_NAME to localhost as twitter callback
    url does not accept 127.0.0.1
    Tip : set callback origin(site) for facebook and twitter
    as http://domain.com (or use your domain name) as this provider
    don't accept 127.0.0.1 / localhost
'''
 
app.config['SERVER_NAME'] = 'localhost:5000'
 
@app.route('/')
def index():
    return render_template('index.html')
 
if __name__ == "__main__":
    app.run(debug=True)

Führen Sie den Server mit dem folgenden Befehl aus, um sicherzustellen, dass die Anwendung erfolgreich ausgeführt wird und die Seite index.html angezeigt wird. 

Nachdem Sie die Apps erstellt haben, sehen wir uns an, wie Sie Oauth für Google, Twitter und Facebook hinzufügen. Aber lassen Sie uns zuerst den OAuth initialisieren.

OAuth initialisieren

Python3

from flask import Flask, render_template
from authlib.integrations.flask_client import OAuth
 
app = Flask(__name__)
 
app.secret_key = '\xfd{H\xe5<\x95\xf9\xe3\x96.5\xd1\x01O<!/
\xd5\xa2\xa0\x9fR"\xa1\xa8'
'''
    Set SERVER_NAME to localhost as twitter callback
    url does not accept 127.0.0.1
    Tip : set callback origin(site) for facebook and twitter
    as http://domain.com (or use your domain name) as this provider
    don't accept 127.0.0.1 / localhost
'''
 
app.config['SERVER_NAME'] = 'localhost:5000'
oauth = OAuth(app)
 
@app.route('/')
def index():
    return render_template('index.html')
 
if __name__ == "__main__":
    app.run(debug=True)

Hier haben wir OAuth mit der Klasse OAuth(app) initialisiert und unseren Servernamen in localhost:5000 geändert. Sehen wir uns nun an, wie das OAuth für verschiedene Plattformen erstellt wird.

Erstellen Sie OAuth für Google

Python3

# The user details get print in the console.
# so you can do whatever you want to do instead
# of printing it
 
from flask import Flask, render_template, url_for, redirect
from authlib.integrations.flask_client import OAuth
import os
 
app = Flask(__name__)
app.secret_key = '\xfd{H\xe5<\x95\xf9\xe3\x96.5\xd1\x01O<!/
xd5\xa2\xa0\x9fR"\xa1\xa8'
 
'''
    Set SERVER_NAME to localhost as twitter callback
    url does not accept 127.0.0.1
    Tip : set callback origin(site) for facebook and twitter
    as http://domain.com (or use your domain name) as this provider
    don't accept 127.0.0.1 / localhost
'''
 
app.config['SERVER_NAME'] = 'localhost:5000'
oauth = OAuth(app)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/google/')
def google():
   
    # Google Oauth Config
    # Get client_id and client_secret from enviroment variables
    # For developement purpose you can directly put it
    # here inside double quotes
    GOOGLE_CLIENT_ID = os.environ.get('GOOGLE_CLIENT_ID')
    GOOGLE_CLIENT_SECRET = os.environ.get('GOOGLE_CLIENT_SECRET')
     
    CONF_URL = 'https://accounts.google.com/.well-known/openid-configuration'
    oauth.register(
        name='google',
        client_id=GOOGLE_CLIENT_ID,
        client_secret=GOOGLE_CLIENT_SECRET,
        server_metadata_url=CONF_URL,
        client_kwargs={
            'scope': 'openid email profile'
        }
    )
     
    # Redirect to google_auth function
    redirect_uri = url_for('google_auth', _external=True)
    return oauth.google.authorize_redirect(redirect_uri)
 
@app.route('/google/auth/')
def google_auth():
    token = oauth.google.authorize_access_token()
    user = oauth.google.parse_id_token(token)
    print(" Google User ", user)
    return redirect('/')
 
if __name__ == "__main__":
    app.run(debug=True)

Erstellen Sie OAuth für Twitter

Python3

# The user details get print in the console.
# so you can do whatever you want to do instead
# of printing it
 
from flask import Flask, render_template, url_for, redirect
from authlib.integrations.flask_client import OAuth
import os
 
app = Flask(__name__)
app.secret_key = '\xfd{H\xe5<\x95\xf9\xe3\x96.5\xd1\x01O/
<!\xd5\xa2\xa0\x9fR"\xa1\xa8'
 
'''
    Set SERVER_NAME to localhost as twitter callback
    url does not accept 127.0.0.1
    Tip : set callback origin(site) for facebook and twitter
    as http://domain.com (or use your domain name) as this provider
    don't accept 127.0.0.1 / localhost
'''
 
app.config['SERVER_NAME'] = 'localhost:5000'
oauth = OAuth(app)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/google/')
def google():
   
    # Google Oauth Config
    # Get client_id and client_secret from enviroment variables
    # For developement purpose you can directly put it here inside double quotes
    GOOGLE_CLIENT_ID = os.environ.get('GOOGLE_CLIENT_ID')
    GOOGLE_CLIENT_SECRET = os.environ.get('GOOGLE_CLIENT_SECRET')
    CONF_URL = 'https://accounts.google.com/.well-known/openid-configuration'
    oauth.register(
        name='google',
        client_id=GOOGLE_CLIENT_ID,
        client_secret=GOOGLE_CLIENT_SECRET,
        server_metadata_url=CONF_URL,
        client_kwargs={
            'scope': 'openid email profile'
        }
    )
     
    # Redirect to google_auth function
    redirect_uri = url_for('google_auth', _external=True)
    return oauth.google.authorize_redirect(redirect_uri)
 
@app.route('/google/auth/')
def google_auth():
    token = oauth.google.authorize_access_token()
    user = oauth.google.parse_id_token(token)
    print(" Google User ", user)
    return redirect('/')
 
@app.route('/twitter/')
def twitter():
   
    # Twitter Oauth Config
    TWITTER_CLIENT_ID = os.environ.get('TWITTER_CLIENT_ID')
    TWITTER_CLIENT_SECRET = os.environ.get('TWITTER_CLIENT_SECRET')
    oauth.register(
        name='twitter',
        client_id=TWITTER_CLIENT_ID,
        client_secret=TWITTER_CLIENT_SECRET,
        request_token_url='https://api.twitter.com/oauth/request_token',
        request_token_params=None,
        access_token_url='https://api.twitter.com/oauth/access_token',
        access_token_params=None,
        authorize_url='https://api.twitter.com/oauth/authenticate',
        authorize_params=None,
        api_base_url='https://api.twitter.com/1.1/',
        client_kwargs=None,
    )
    redirect_uri = url_for('twitter_auth', _external=True)
    return oauth.twitter.authorize_redirect(redirect_uri)
 
@app.route('/twitter/auth/')
def twitter_auth():
    token = oauth.twitter.authorize_access_token()
    resp = oauth.twitter.get('account/verify_credentials.json')
    profile = resp.json()
    print(" Twitter User", profile)
    return redirect('/')
 
if __name__ == "__main__":
    app.run(debug=True)

Erstellen Sie OAuth für Facebook

Python3

# The user details get print in the console.
# so you can do whatever you want to do instead
# of printing it
 
from flask import Flask, render_template, url_for, redirect
from authlib.integrations.flask_client import OAuth
import os
 
app = Flask(__name__)
app.secret_key = '\xfd{H\xe5<\x95\xf9\xe3\x96.5\xd1\x01O/
<!\xd5\xa2\xa0\x9fR"\xa1\xa8'
 
'''
    Set SERVER_NAME to localhost as twitter callback
    url does not accept 127.0.0.1
    Tip : set callback origin(site) for facebook and twitter
    as http://domain.com (or use your domain name) as this provider
    don't accept 127.0.0.1 / localhost
'''
 
app.config['SERVER_NAME'] = 'localhost:5000'
oauth = OAuth(app)
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/google/')
def google():
   
    # Google Oauth Config
    # Get client_id and client_secret from enviroment variables
    # For developement purpose you can directly put it here inside double quotes
    GOOGLE_CLIENT_ID = os.environ.get('GOOGLE_CLIENT_ID')
    GOOGLE_CLIENT_SECRET = os.environ.get('GOOGLE_CLIENT_SECRET')
    CONF_URL = 'https://accounts.google.com/.well-known/openid-configuration'
    oauth.register(
        name='google',
        client_id=GOOGLE_CLIENT_ID,
        client_secret=GOOGLE_CLIENT_SECRET,
        server_metadata_url=CONF_URL,
        client_kwargs={
            'scope': 'openid email profile'
        }
    )
     
    # Redirect to google_auth function
    redirect_uri = url_for('google_auth', _external=True)
    return oauth.google.authorize_redirect(redirect_uri)
 
@app.route('/google/auth/')
def google_auth():
    token = oauth.google.authorize_access_token()
    user = oauth.google.parse_id_token(token)
    print(" Google User ", user)
    return redirect('/')
 
@app.route('/twitter/')
def twitter():
   
    # Twitter Oauth Config
    TWITTER_CLIENT_ID = os.environ.get('TWITTER_CLIENT_ID')
    TWITTER_CLIENT_SECRET = os.environ.get('TWITTER_CLIENT_SECRET')
    oauth.register(
        name='twitter',
        client_id=TWITTER_CLIENT_ID,
        client_secret=TWITTER_CLIENT_SECRET,
        request_token_url='https://api.twitter.com/oauth/request_token',
        request_token_params=None,
        access_token_url='https://api.twitter.com/oauth/access_token',
        access_token_params=None,
        authorize_url='https://api.twitter.com/oauth/authenticate',
        authorize_params=None,
        api_base_url='https://api.twitter.com/1.1/',
        client_kwargs=None,
    )
    redirect_uri = url_for('twitter_auth', _external=True)
    return oauth.twitter.authorize_redirect(redirect_uri)
 
@app.route('/twitter/auth/')
def twitter_auth():
    token = oauth.twitter.authorize_access_token()
    resp = oauth.twitter.get('account/verify_credentials.json')
    profile = resp.json()
    print(" Twitter User", profile)
    return redirect('/')
 
@app.route('/facebook/')
def facebook():
   
    # Facebook Oauth Config
    FACEBOOK_CLIENT_ID = os.environ.get('FACEBOOK_CLIENT_ID')
    FACEBOOK_CLIENT_SECRET = os.environ.get('FACEBOOK_CLIENT_SECRET')
    oauth.register(
        name='facebook',
        client_id=FACEBOOK_CLIENT_ID,
        client_secret=FACEBOOK_CLIENT_SECRET,
        access_token_url='https://graph.facebook.com/oauth/access_token',
        access_token_params=None,
        authorize_url='https://www.facebook.com/dialog/oauth',
        authorize_params=None,
        api_base_url='https://graph.facebook.com/',
        client_kwargs={'scope': 'email'},
    )
    redirect_uri = url_for('facebook_auth', _external=True)
    return oauth.facebook.authorize_redirect(redirect_uri)
 
@app.route('/facebook/auth/')
def facebook_auth():
    token = oauth.facebook.authorize_access_token()
    resp = oauth.facebook.get(
        'https://graph.facebook.com/me?fields=id,name,email,picture{url}')
    profile = resp.json()
    print("Facebook User ", profile)
    return redirect('/')
 
if __name__ == "__main__":
    app.run(debug=True)

Führen Sie die App aus

Server starten mit: 

python app.py

Dann besuchen Sie: 

http://localhost:5000/

Hinweis: Die OAuth-Konfiguration ist für jeden Anbieter unterschiedlich und hängt von der Version von OAuth ab. Jeder Anbieter hat seine eigene Dokumentation zur Implementierung des Protokolls, also schauen Sie sich diese unbedingt an.