You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -12,11 +12,14 @@ import SubHeading from "@site/src/components/SubHeading";
12
12
13
13
## Introduction to OAuth
14
14
15
-
OAuth which stands for Open Authorization is a protocol that allows users to grant third-party applications access to their data without giving away their passwords. OAuth works by giving each user a unique identifier and secret, which they can use to authorize applications to access their data.
15
+
OAuth which stands for Open Authorization is a protocol that allows users to grant third-party applications access to their data without giving away their passwords.
16
+
OAuth works by giving each user a unique identifier and secret, which they can use to authorize applications to access their data.
16
17
17
-
OAuth is a secure protocol that protects user data. The user's password is never shared with the website or app. The OAuth authorization server only grants access to the user's data if the user explicitly grants permission.
18
+
OAuth is a secure protocol that protects user data. The user's password is never shared with the website or app.
19
+
The OAuth authorization server only grants access to the user's data if the user explicitly grants permission.
18
20
19
-
OAuth is a widely used protocol. It is supported by many popular websites and apps, including Google, Facebook, Twitter, and Amazon. OAuth is a secure and convenient way for users to share their data with third-party applications.
21
+
OAuth is a widely used protocol. It is supported by many popular websites and apps, including Google, Facebook, Twitter, and Amazon.
22
+
OAuth is a secure and convenient way for users to share their data with third-party applications.
20
23
21
24
Here are some of the benefits of using OAuth:
22
25
@@ -25,85 +28,108 @@ Here are some of the benefits of using OAuth:
25
28
- Flexibility: OAuth is a flexible protocol that can be used to access a wide variety of data.
26
29
- Interoperability: OAuth is a widely supported protocol that can be used with a wide variety of third-party applications.
27
30
28
-
If you are developing a website or app that needs to access user data, OAuth is a good option to consider. OAuth is a secure, convenient, and flexible protocol that can help you to protect user data and make it easy for users to share their data with your application.
31
+
If you are developing a website or app that needs to access user data, OAuth is a good option to consider.
32
+
OAuth is a secure, convenient, and flexible protocol that can help you to protect user data and make it easy for users to share their data with your application.
33
+
34
+
<br />
29
35
30
36
## Creating a Google OAuth Client ID
31
37
32
38
To create a Google OAuth Client ID:
39
+
33
40
- You will need to create a Google Cloud Platform project. Open Google Cloud Platform [here](https://console.cloud.google.com/)
34
41
- Once you have created a project, you can go to the API Credentials page and click the "Create Credentials" button.
35
42
- Select "OAuth Client ID" and then "Web application".
36
43
- Enter a name for your application and click the "Create" button. You will then be given a Client ID and Client Secret.
37
44
45
+
<br />
46
+
38
47
## Setting up Flask application
48
+
39
49
Flask is a microframework for Python web development. It is a simple, flexible, and extensible framework that can be used to create a wide variety of web applications.
40
50
41
51
This tutorial will focus on setting up OAuth for an existing Flask template. The template is hosted on Github and will be modified to accept user authorization using OAuth.
42
52
43
-
- Open the terminal and clone the repository using the command
53
+
> Open the terminal and clone the repository using the command
Flask-Dance is a Flask extension that makes it easy to add OAuth authentication to your Flask apps. Flask-Dance provides a single, consistent API for working with OAuth providers, making it easy to add authentication to your app without having to learn the specific OAuth protocol for each provider.
117
+
118
+
Flask-Dance is a Flask extension that makes it easy to add OAuth authentication to your Flask apps.
119
+
Flask-Dance provides a single, consistent API for working with OAuth providers, making it easy to add authentication to your app without having to learn the specific OAuth protocol for each provider.
98
120
99
121
Flask-Dance supports a wide variety of OAuth providers, including Google, Facebook, Twitter, GitHub, Bitbucket, Instagram, Reddit, Spotify, and many more
100
122
101
-
- Install `flask-dance` by executing the command on your terminal
Some changes will be made to the project files to add an authentication mechanism using Google OAuth. Below is the current folder structure of the project.
108
134
```bash
109
135
.
@@ -119,7 +145,9 @@ Some changes will be made to the project files to add an authentication mechanis
119
145
├── requirements.txt
120
146
└── run.py
121
147
```
122
-
- We will be creating an authentication schema that will be used to save authentication tokens when a user login using Google authentication. Make the following changes to `apps/authentication/models.py`
148
+
149
+
We will be creating an authentication schema that will be used to save authentication tokens when a user login using Google authentication.
150
+
Make the following changes to `apps/authentication/models.py`
123
151
124
152
```py
125
153
# apps/authentication/models.py
@@ -147,7 +175,9 @@ class OAuth(OAuthConsumerMixin, db.Model): # <-- NEW class
147
175
user = db.relationship(Users)
148
176
```
149
177
150
-
- We will be creating an `oauth` module to handle the signup and login using Google authentication. Create a file `oauth.py` in the `apps/authentication` folder and add the following code
178
+
We will be creating an `oauth` module to handle the signup and login using Google authentication.
179
+
Create a file `oauth.py` in the `apps/authentication` folder and add the following code
We have created a blueprint that makes use of Google's authentication. We connected the blueprint to the `OAuth` schema.
200
231
201
-
- Next step is to register the blueprint to our Flask application to make it accessible from the browser route. Update `apps/__init__.py` to register the blueprint
232
+
Next step is to register the blueprint to our Flask application to make it accessible from the browser route. Update `apps/__init__.py` to register the blueprint
233
+
202
234
```py
203
235
# apps/__init__.py
204
236
...
@@ -220,7 +252,8 @@ def create_app():
220
252
return app
221
253
```
222
254
223
-
- Next step is creating a route for the google blueprint that will handle requests for the authentication. Update `apps/authentication/routes.py` with the following code
255
+
Next step is creating a route for the google blueprint that will handle requests for the authentication. Update `apps/authentication/routes.py` with the following code
256
+
224
257
```py
225
258
# apps/authentication/routes.py
226
259
...
@@ -238,35 +271,55 @@ def login_google():
238
271
```
239
272
Now requests to `login/google` route will be handled by this route. From your terminal you can run the command `flask routes` to see all the routes present in the application.
240
273
241
-
- Start up the application from the terminal using the command
274
+
Start up the application from the terminal using the command
275
+
242
276
```bash
243
-
(venv) flask-google-oauth$ flask run
277
+
(venv) $ flask run
244
278
```
245
-
From your browser visit [`127.0.0.1:5000/login/google`](http://127.0.0.1:5000/login/google). Once you have logged in, you will be able to access protected resources in your Flask app.
246
279
247
-
## Adding Signin button to login page
280
+
From your browser visit [`127.0.0.1:5000/login/google`](http://127.0.0.1:5000/login/google).
281
+
Once you have logged in, you will be able to access protected resources in your Flask app.
282
+
283
+
<br />
284
+
285
+
## Adding SignIN button (Login Page)
286
+
248
287
We will be adding a link to the login page to simplify the signin process for the user.
249
288
250
-
- Add the following code to `apps/templates/accounts/login.html` on line 37
289
+
Add the following code to `apps/templates/accounts/login.html` on `Line 37`
290
+
251
291
```html
252
292
<!--apps/templates/accounts/login.html-->
253
293
...
254
294
<divclass="card-body">
255
295
<ahref='login/google'class='btn btn-primary'>Sign in with Google</a>
256
296
...
257
297
```
258
-
This adds a link that points to the authorization route. With this, users can signin to the web application using google authentication wihtout having to change the URL from the browser, making for a better user experience.
298
+
299
+
This adds a link that points to the authorization route.
300
+
With this, users can signin to the web application using google authentication wihtout having to change the URL from the browser, making for a better user experience.
301
+
302
+
<br />
259
303
260
304
## Conclusion
261
-
In conclusion, this article has provided an overview of OAuth and its importance in modern web applications. We explored the process of creating a Google OAuth Client ID, which is essential for enabling user authentication and authorization using Google accounts. Additionally, we discussed the steps involved in setting up a Flask application, a popular Python web framework, to handle OAuth authentication.
262
305
263
-
To facilitate OAuth functionality in our Flask application, we installed and configured Flask-Dance, a Flask extension that simplifies the integration of OAuth providers. Specifically, we focused on configuring Flask-Dance with Google OAuth, allowing users to authenticate with their Google accounts in our application.
306
+
In conclusion, this article has provided an overview of OAuth and its importance in modern web applications.
307
+
We explored the process of creating a Google OAuth Client ID, which is essential for enabling user authentication and authorization using Google accounts.
308
+
Additionally, we discussed the steps involved in setting up a Flask application, a popular Python web framework, to handle OAuth authentication.
309
+
310
+
To facilitate OAuth functionality in our Flask application, we installed and configured Flask-Dance, a Flask extension that simplifies the integration of OAuth providers.
311
+
Specifically, we focused on configuring Flask-Dance with Google OAuth, allowing users to authenticate with their Google accounts in our application.
264
312
265
-
By adding the "Sign in with Google" button to your login page, you provide users with a convenient and secure method to access your Flask application using their Google accounts. This not only simplifies the login process but also enhances the user experience and increases user engagement.
313
+
By adding the "Sign in with Google" button to your login page, you provide users with a convenient and secure method to access your Flask application using their Google accounts.
314
+
This not only simplifies the login process but also enhances the user experience and increases user engagement.
266
315
267
-
By following the steps outlined in this article, developers can leverage the power of OAuth and Google OAuth specifically to enable secure user authentication and authorization in their Flask applications. This process not only enhances the user experience but also provides a seamless integration with widely used social media and identity platforms.
316
+
By following the steps outlined in this article, developers can leverage the power of OAuth and Google OAuth specifically to enable secure user authentication and authorization in their Flask applications.
317
+
This process not only enhances the user experience but also provides a seamless integration with widely used social media and identity platforms.
0 commit comments