Introduction

Integrating Google Sign-In into your Flask web application allows users to log in and access your services using their Google accounts. In this guide, we'll explore how to create a Flask app with Google Sign-In, enabling users to authenticate themselves and access your application securely. By following this guide, you'll be able to implement Google Sign-In and utilize user authentication for your Flask app.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and creating a directory structure. Here's a sample structure:

google-signin-app/
    app.py
    templates/
        login.html
        dashboard.html

Step 2: Installing Flask and Required Libraries

Install Flask and the necessary libraries to support Google Sign-In. You can use pip to install the required packages:

pip install Flask
pip install Flask-OAuthlib

Step 3: Creating a Google API Project

Create a Google API project in the Google Developers Console. Configure OAuth 2.0 credentials for your project and obtain a client ID and client secret.


Step 4: Configuring Google Sign-In in Your Flask App

Configure Google Sign-In in your Flask application. Here's an example of Python code:

# app.py
from flask import Flask, render_template, redirect, url_for, session
from flask_oauthlib.client import OAuth
app = Flask(__name__)
app.secret_key = 'your_secret_key'
oauth = OAuth(app)
google = oauth.remote_app(
    'google',
    consumer_key='YOUR_GOOGLE_CLIENT_ID',
    consumer_secret='YOUR_GOOGLE_CLIENT_SECRET',
    request_token_params={
        'scope': 'email',
    },
    base_url='https://www.googleapis.com/oauth2/v1/',
    request_token_url=None,
    access_token_method='POST',
    access_token_url='https://accounts.google.com/o/oauth2/token',
    authorize_url='https://accounts.google.com/o/oauth2/auth',
)
@app.route('/')
def home():
    return 'Welcome to the home page. <a href="/login">Login with Google</a>'
@app.route('/login')
def login():
    return google.authorize(callback=url_for('authorized', _external=True))
@app.route('/logout')
def logout():
    session.pop('google_token', None)
    return 'Logged out successfully. <a href="/">Home</a>'
@app.route('/login/authorized')
def authorized():
    response = google.authorized_response()
    if response is None or response.get('access_token') is None:
        return 'Access denied: reason={} error={}'.format(
            request.args['error_reason'],
            request.args['error_description']
        )
    session['google_token'] = (response['access_token'], '')
    user_info = google.get('userinfo')
    return render_template('dashboard.html', user_info=user_info.data)
@google.tokengetter
def get_google_oauth_token():
    return session.get('google_token')
if __name__ == '__main__':
    app.run(debug=True)

Step 5: Creating Login and Dashboard Templates

Create HTML templates for the login and dashboard pages. Here's an example of a login button:

<!-- templates/login.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <a href="/login">Login with Google</a>
</body>
</html>

And here's an example of a dashboard page:

<!-- templates/dashboard.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
</head>
<body>
    <h1>Welcome, {{ user_info.name }}</h1>
    <p>Email: {{ user_info.email }}</p>
    <a href="/logout">Logout</a>
</body>
</html>

Conclusion

Implementing Google Sign-In in your Flask application provides a convenient way for users to log in using their Google accounts. By following this guide, you've learned how to set up your Flask app, configure Google Sign-In, and create login and dashboard pages. You can now add Google Sign-In functionality to your Flask application and provide users with a seamless authentication experience.