Documentation Index
Fetch the complete documentation index at: https://docs.replit.com/llms.txt
Use this file to discover all available pages before exploring further.
Permitir que seus usuários façam login no seu site usando a conta do Google tem os seguintes benefícios:
- Você não precisa implementar seu próprio esquema de autenticação.
- Você pode obter o nome e as informações de contato dos usuários facilmente.
- Você pode usar as mesmas credenciais para acessar os recursos do Google dos usuários, como Sheets e Drive.
Este guia vai orientar você sobre como fazer isso com Python e Flask no Replit.
Primeiro, vamos percorrer como configurar a autenticação OAuth básica e, em seguida, como usar as credenciais resultantes para acessar os recursos do Google dos usuários.
Introdução ao OAuth
A autenticação do Google é baseada no padrão OAuth. O funcionamento do OAuth é o seguinte:
- Em algum lugar do seu site, você direciona o usuário para uma página de login.
- Quando ele vai à página de login, você não implementa o formulário de login no seu site, mas sim redireciona para o serviço de login do Google para autenticar o usuário.
- Quando o serviço de login do Google autentica o usuário com sucesso, ele redireciona de volta para o seu site em uma URL predefinida de sua escolha, como
https://YOUR_DOMAIN/oauth2callback, enviando algumas informações pertinentes ao usuário e à sessão de login.
- Você usa as informações de login do usuário para obter um token de acesso, que é como um passe que você pode usar para acessar os recursos do usuário, como informações de perfil, planilhas, documentos e muito mais.
OAuth: Mostre-me o código
Se você é como eu, a primeira coisa que quer é código funcionando. O código abaixo é o que você precisa. No entanto, você precisará configurar algumas coisas no seu Google Cloud Console para que tudo funcione. Isso será abordado na próxima seção. Crie um novo App no Replit usando o template Flask e coloque o seguinte no main.py. Os comentários no código explicam o que as partes individuais fazem:
from flask import Flask, redirect, session, url_for, request
import google_auth_oauthlib.flow
import json
import os
import requests
app = Flask('app')
# `FLASK_SECRET_KEY` is used by sessions. You should create a random string
# and store it as secret.
app.secret_key = os.environ.get('FLASK_SECRET_KEY') or os.urandom(24)
# `GOOGLE_APIS_OAUTH_SECRET` contains the contents of a JSON file to be downloaded
# from the Google Cloud Credentials panel. See next section.
oauth_config = json.loads(os.environ['GOOGLE_OAUTH_SECRETS'])
# This sets up a configuration for the OAuth flow
oauth_flow = google_auth_oauthlib.flow.Flow.from_client_config(
oauth_config,
# scopes define what APIs you want to access on behave of the user once authenticated
scopes=[
"https://www.googleapis.com/auth/userinfo.email",
"openid",
"https://www.googleapis.com/auth/userinfo.profile",
]
)
# This is entrypoint of the login page. It will redirect to the Google login service located at the
# `authorization_url`. The `redirect_uri` is actually the URI which the Google login service will use to
# redirect back to this app.
@app.route('/signin')
def signin():
# We rewrite the URL from http to https because inside the Replit App http is used,
# but externally it's accessed via https, and the redirect_uri has to match that
oauth_flow.redirect_uri = url_for('oauth2callback', _external=True).replace('http://', 'https://')
authorization_url, state = oauth_flow.authorization_url()
session['state'] = state
return redirect(authorization_url)
# This is the endpoint that Google login service redirects back to. It must be added to the "Authorized redirect URIs"
# in the API credentials panel within Google Cloud. It will call a Google endpoint to request
# an access token and store it in the user session. After this, the access token can be used to access
# APIs on behalf of the user.
@app.route('/oauth2callback')
def oauth2callback():
if not session['state'] == request.args['state']:
return 'Invalid state parameter', 400
oauth_flow.fetch_token(authorization_response=request.url.replace('http:', 'https:'))
session['access_token'] = oauth_flow.credentials.token
return redirect("/")
# This is the home page of the app. It directs the user to log in if they are not already.
# It shows the user info's information if they already are.
@app.route('/')
def welcome():
if "access_token" in session:
user_info = get_user_info(session["access_token"])
if user_info:
return f"""
Hello {user_info["given_name"]}!<br>
Your email address is {user_info["email"]}<br>
<a href="/logout">Log out</a>
"""
return """
<h1>Hello!</h1>
<a href="/signin">Sign In via Google</a><br>
"""
# Call the userinfo API to get the user's information with a valid access token.
# This is the first example of using the access token to access an API on the user's behalf.
def get_user_info(access_token):
response = requests.get("https://www.googleapis.com/oauth2/v3/userinfo", headers={
"Authorization": f"Bearer {access_token}"
})
if response.status_code == 200:
user_info = response.json()
return user_info
else:
print(f"Failed to fetch user info: {response.status_code} {response.text}")
return None
@app.route('/logout')
def logout():
session.clear()
return redirect('/')
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
Para colocar o código acima em funcionamento, você precisará fazer estas coisas no Google Cloud.
- Criar um projeto no Google Cloud (se ainda não tiver um).
- Configurar a tela de consentimento OAuth.
- Criar um ID de cliente OAuth para o seu app.
Criar um projeto no Google Cloud
Se você já tiver um projeto no Google Cloud que deseja usar para este exercício, pode pular esta etapa.
- Acesse o Google Cloud Console
- Clique no seletor de projeto ao lado do logotipo do Google Cloud:
- Selecione um projeto existente ou clique em “New Project” para criar um novo projeto.
- Se estiver criando um novo projeto, insira um nome para o projeto e clique em “Create”.
Se você vir seu novo projeto aparecer em um pop-up, clique em “Select project” para torná-lo o projeto ativo.
Configurar a tela de consentimento OAuth
Agora que você tem um projeto, pode configurar a tela de consentimento OAuth para ele:
- Acesse a Tela de Consentimento OAuth
- Certifique-se de que o projeto no menu suspenso de projetos é o que você deseja.
- Selecione “External” para permitir que qualquer usuário faça login no seu app com uma conta do Google. “Internal” permitirá apenas pessoas da sua organização.
- Clique em “Create”.
- Insira um nome para o app e o e-mail da pessoa responsável por ele (você?)
- Insira um endereço de e-mail em “Developer contact information”.
- Clique em “Save and continue”.
- Na tela de Escopos, você pode adicionar as APIs às quais deseja que seu app tenha acesso. Você já tem acesso às APIs para obter informações básicas do usuário.
Por enquanto, deixe como está e clique em “Save and continue”.
9. Em Usuários de Teste, você precisa adicionar o e-mail dos usuários que deseja que possam testar o app durante sua fase de testes.
Clique em “Add users”
10. Adicione um ou mais endereços de e-mail do Google e clique em “Add”.
Em seguida, clique em “Save and continue”.
11. Revise a tela de resumo. Você sempre pode voltar e editar qualquer uma das etapas.
Criar um ID de cliente OAuth para o seu app
Esta é a última parte. Para que o OAuth funcione, você precisa criar um ID de cliente OAuth para o app.
- Acesse Credenciais.
- Clique em “Create credentials”
selecione “OAuth client ID”.
3. Selecione “Web application” para o tipo de aplicativo. Insira um nome para este ID de cliente.
- Agora, acesse seu App Flask no Replit. Abra o shell e insira:
echo https://$REPLIT_DEV_DOMAIN/oauth2callback. O resultado será algo como: https://81309e9b-c4df-48e0-a2c2-0a8d3c0e3162-00-35ppsa0tcuv6v.infra-staging.replit.dev/oauth2callback. Copie este texto e insira-o como uma das “Authorized redirect URIs” na parte inferior do formulário
Mais tarde, quando você publicar seu app, você vai querer voltar aqui para adicionar outra entrada https://YOUR_APP_DOMAIN/oauth2callback
- Clique em “Create”
- Clique em “Download JSON”:
- Acesse seu App no Replit novamente e abra o painel de Secrets. Crie um segredo chamado
GOOGLE_OAUTH_SECRETS e cole o conteúdo do arquivo baixado
como valor do segredo.
Ufa! Isso foi trabalhoso. Parabéns se você chegou até aqui! Agora você pode executar o app Flask e fazer login usando uma conta Google de usuário de teste. Para tornar seu app disponível para qualquer usuário do Google, você precisará voltar à página de consentimento e clicar em “Publish App”. Um processo de verificação pode ser necessário se seu app exigir APIs adicionais do Google, como Sheets e Drive.
A seguir, vamos abordar como integrar com uma API do Google, como o Sheets. Continue lendo se quiser ir mais longe.
Configuração da API do Google Sheets
Para adicionar uma integração com uma API do Google, como o Google Sheets, primeiro você precisa habilitar a API para o app. Você pode navegar pelas APIs disponíveis. Como exemplo, usaremos o Google Sheets.
- Acesse a página de listagem da API do Google Sheets.
- Clique em “Enable”.
Pronto! Essa é toda a configuração do Google Cloud que você precisava fazer para esta parte.
Primeiro, na seção de fluxo OAuth do código original, deixamos tudo igual, exceto pela adição de "https://www.googleapis.com/auth/spreadsheets.readonly" à lista de escopos:
[… blocos de código completos preservados como estão …]
Lembre-se, se você publicar o app, certifique-se de:
- Adicionar a URI
/oauth2callback de produção às “Authorized redirect URIs”.
- Acessar a página de consentimento e clicar em “Publish App”.
Esperamos que você tenha tido uma boa experiência e que aproveite suas próximas aventuras.