Autenticación OAuth con Flask: conéctese a Google, Twitter y Facebook

Posted on by Rudeus Greyrat

En este artículo, vamos a crear una aplicación de matraz que utilizará el protocolo OAuth para obtener información del usuario. Primero, necesitamos entender el protocolo OAuth y su procedimiento.

¿Qué es OAuth?

OAuth significa Autorización abierta y se implementó para lograr una conexión entre servicios en línea. El sitio de la comunidad OAuth lo define como “ Un protocolo abierto para permitir la autorización segura en un método simple y estándar desde aplicaciones web, móviles y de escritorio. ”. Un ejemplo popular de OAuth sería el botón Iniciar sesión con Google presente en varios sitios web. Aquí, el servicio del sitio web se conecta con el servicio de Google para brindarle una opción fácil para autorizar su recurso al servicio deseado. Hay dos versiones de OAuth OAuth1.0 y OAuth2.0 ahora.

Terminologías en OAuth

  • Cliente: Es la aplicación o servicio que intenta conectarse con el otro servicio.
  • Proveedor: Es el servicio al que se conecta el cliente.
  • URL de autorización : Es la URL proporcionada por el proveedor a la que el cliente envía requests.
  • ID y secreto del cliente:  lo proporciona el proveedor y se utiliza cuando el cliente envía la solicitud de autorización al proveedor.
  • Código de autorización: es un código que el cliente recupera cuando el usuario se autentica correctamente y se envía al servidor de autorización del proveedor.
  • URL de devolución de llamada: es la URL establecida por el cliente a la que el proveedor envía el código de autorización y el servicio de atención al cliente recupera los recursos del usuario.

Pasos necesarios para configurar OAuth

Paso 1: Registre su aplicación como cliente en el sitio web del proveedor. Recibirá las credenciales del cliente que incluyen el ID del cliente y el secreto del cliente.

Paso 2: la aplicación cliente envía una solicitud de autorización a la URL de autorización del proveedor.

Paso 3: el usuario se autentica en el sitio del proveedor y permite que el servicio de atención al cliente utilice los recursos.

Paso 4: El proveedor envía el código de autorización al cliente

Paso 5: El cliente envía el código de autorización al servidor de autorización del proveedor.

Paso 6: el proveedor envía los tokens del cliente que se pueden usar para acceder a los recursos del usuario.

Ahora que el concepto de OAuth está claro, podemos comenzar a construir nuestra aplicación. Hay varias bibliotecas disponibles para nosotros que se pueden usar para lograr OAuth. La biblioteca que usaremos es AuthLib, que admite OAuth 1.0 y OAuth 2.0.

Instalación de dependencias requeridas

Para instalar las dependencias requeridas, escriba el siguiente comando en la terminal.

pip install -U Flask Authlib requests

Nota: Se recomienda crear un entorno virtual antes de instalar estas dependencias.

Recuperar las credenciales de cliente de los proveedores

  • Google: cree su cliente OAuth de Google en https://console.cloud.google.com/apis/credentials, asegúrese de agregar http://localhost:5000/google/auth/ en las URI de redirección autorizadas.
  • Twitter: cree su cliente de Twitter Oauth 1.0 en https://developer.twitter.com/ creando una aplicación. Agregue http://localhost:5000/twitter/auth/ en las URI de redirección autorizadas.
  • Facebook: cree su cliente OAuth de Facebook en https://developer.facebook.com/, creando una aplicación. Agregue http://localhost:5000/facebook/auth/ en los URI de redirección autorizados.

Las credenciales del cliente se pueden usar directamente en el programa, pero en la producción real, estas credenciales se almacenarán en variables de entorno.

Crear la interfaz de usuario 

Cree una carpeta llamada templates y dentro cree un archivo index.html. Pegue el siguiente código dentro del archivo index.html. Es un código simple que crea botones para cada proveedor.

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>

Creación de la aplicación Flask

Inicializar la aplicación del matraz

Vamos a crear una aplicación de matraz simple que no hará nada y simplemente mostrará el archivo HTML creado anteriormente en la página de inicio.

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)

Ejecute el servidor con el siguiente comando para asegurarse de que la aplicación se ejecuta correctamente y se muestra la página index.html. 

Después de crear las aplicaciones, veamos cómo agregar Oauth para Google, Twitter y Facebook. Pero primero vamos a inicializar el OAuth.

Inicializar OAuth

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)

Aquí hemos inicializado el OAuth usando la clase OAuth (aplicación) y hemos cambiado el nombre de nuestro servidor a localhost: 5000. Ahora veamos cómo crear el OAuth para diferentes plataformas.

Crear OAuth para 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 environment 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)

Crear OAuth para 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 environment 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)

Crear OAuth para 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 environment 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)

Ejecute la aplicación

Iniciar servidor con: 

python app.py

Entonces visite: 

http://localhost:5000/

Nota: La configuración de OAuth para cada proveedor es diferente y depende de la versión de OAuth. Cada proveedor tiene su propia documentación sobre la implementación del protocolo, así que asegúrese de consultarla.

Publicación traducida automáticamente

Artículo escrito por gupta_shrinath y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *