Reduced steps for local development setup for social media auth (#1374) (#1383)

This is related to ticket #1374, and simplifies the steps for local
development environments to have a working login flow for github and
google.

The improvements were configuration for the client id and secret for
google and github via .env vars instead of having to go through setting
up "Social Applications" via the admin interface, and automating the
process for creating google cloud projects in which oauth clients can be
created. Documentation was adjusted to fit.

That was as far as this could be automated given limitations on both
Google Cloud Platform and Github's APIs for creating oauth clients/apps.

The terraform process can be improved if these tickets see some progress
or an API comes about to support this.

Google
https://github.com/hashicorp/terraform-provider-google/issues/16452
https://issuetracker.google.com/issues/116182848

Github
https://github.com/integrations/terraform-provider-github/issues/786
This commit is contained in:
daveoconnor
2024-10-30 11:31:34 -07:00
committed by GitHub
parent 16f96e6017
commit 58b791eee2
14 changed files with 339 additions and 29 deletions

View File

@@ -291,46 +291,52 @@ See https://testdriven.io/blog/django-social-auth/ for more information.
- Set `http://localhost:8000` as the Homepage URL
- Set `http://localhost:8000/accounts/github/login/callback/` as the Callback URL
- Click whether you want to enable the device flow
- <img src="https://user-images.githubusercontent.com/2286304/252841283-9a846c68-46bb-4dac-8d1e-d35270c09f1b.png" alt="The GitHub screen that registers a new OAuth app" width="400">
- On completion copy the Client ID and Client Secret to the `.env` file as values of `GITHUB_OAUTH_CLIENT_ID` and `GITHUB_OAUTH_CLIENT_SECRET`.
- Run `direnv allow` and restart your docker containers.
<img src="https://user-images.githubusercontent.com/2286304/252841283-9a846c68-46bb-4dac-8d1e-d35270c09f1b.png" alt="The GitHub screen that registers a new OAuth app" width="400">
- Log in to the admin
- Click on Social Applications
<img src="https://user-images.githubusercontent.com/2286304/204597123-3c8ae053-1ba8-4347-bacd-784fe52b2a04.png" alt="The Social Accounts section of the Django admin" width="400">
- Click **Add Social Application**
- Choose GitHub as the provider
- Enter a name like "GitHub OAuth Provider"
- Enter the Client ID from GitHub
- Go back to GitHub and generate a new Client Secret, then copy it into the **Secret Key** field. Choose the site as a **Chosen sites** and save.
<img src="https://user-images.githubusercontent.com/2286304/204648736-79aed1be-4b32-4946-be97-27e7c859603d.png" alt="Screenshot of where to get the Client ID and Client Secret" width="400">
It's ready!
**Working locally**: If you need to run through this flow multiple times, create a superuser so you can log into the admin. Then, log into the admin and delete your "Social Account" from the admin. This will test a fresh connection to GitHub for your logged-in GitHub user.
Setup should be complete and you should be able to see an option to "Use Github" on the sign up page.
To test the flow including authorizing Github for the Boost account, log into your GitHub account settings and click **Applications** in the left menu. Find the "Boost" authorization and delete it. The next time you log into Boost with this GitHub account, you will have to re-authorize it.
<img src="https://user-images.githubusercontent.com/2286304/204642346-8b269aaf-4693-4351-9474-0a998b97689c.png" alt="The 'Authorized OAuth Apps' tab in your GitHub Applications" width="400">
This setup process is not something that can currently be automated through terraform because of a lack of relevant Github API endpoints to create Oauth credentials.
#### Google
More detailed instructions at:
https://docs.allauth.org/en/latest/socialaccount/providers/google.html
Go to https://console.developers.google.com/ and create a new project. Create OAuth 2.0 credentials.
1. Update the `.env` file with values for:
1. `TF_VAR_google_cloud_email` (the email address of your Google Cloud account)
2. `TF_VAR_google_organization_domain` (usually the domain of your Google Cloud account, e.g. "boost.org" if you will be using an @boost.org email address)
3. `TF_VAR_google_cloud_project_name` (optional, default: localboostdev) - needs to change if destroyed and a setup is needed within 30 days
2. Run `make development-tofu-init` to initialize tofu.
3. Run `make development-tofu-plan` to confirm the planned changes.
4. Run `make development-tofu-apply` to apply the changes.
5. Go to https://console.developers.google.com/
1. Search for the newly created project, named "Boost Development" (ID: localboostdev by default).
2. Type "credentials" in the search input at the top of the page.
3. Select "Credentials" under "APIs & Services".
1. Click "+ CREATE CREDENTIALS"
2. Select "OAuth Client ID"
3. Select Application Type: "Web application"
4. Name: "Boost Development" (arbitrary)
5. For "Authorized Javascript Origins" use:`http://localhost:8000`
6. For "Authorized Redirect URIs" use:
* `http://localhost:8000/accounts/google/login/callback/`
* `http://localhost:8000/accounts/google/login/callback/?flowName=GeneralOAuthFlow`
7. Save
6. From the page that's displayed, update the `.env` file with values for the following:
- `GOOGLE_OAUTH_CLIENT_ID` should be similar to "k235bn2b1l1(...)asdsk.apps.googleusercontent.com"
- `GOOGLE_OAUTH_CLIENT_SECRET` should be similar to "LAJACO(...)KLAI612ANAD"
7. Run `direnv allow` and restart your docker containers.
The client id is the full value including domain and tld.
Point 5 above can not be automated through terraform because of a lack of relevant Google Cloud API endpoints to create Oauth credentials.
For the "authorized javascript origins" values use:
Setup should be complete and you should be able to see an option to "Use Google" on the sign up page.
* `http://localhost:8000`
For the "authorized redirect URIs" use:
* `http://localhost:8000/accounts/google/login/callback/`
* `http://localhost:8000/accounts/google/login/callback/?flowName=GeneralOAuthFlow`
#### Additional Notes:
**Working locally**: If you need to run through the login flows multiple times, create a superuser so you can log into the admin. Then, log into the admin and delete your "Social Account" from the admin. This will test a fresh connection to GitHub for your logged-in GitHub user.

View File

@@ -0,0 +1,60 @@
# Production/Staging Server setup for allauth
For development see [development_setup_notes.md](development_setup_notes.md).
For this setup adjustments will need to be made to the values as applicable for each server and service.
### Social Login with django-allauth
Follow these instructions to use the social logins through django-allauth.
See https://testdriven.io/blog/django-social-auth/ for more information.
#### Github
- Go to https://github.com/settings/applications/new and add a new OAuth application
- Set `http://localhost:8000` as the Homepage URL
- Set `http://localhost:8000/accounts/github/login/callback/` as the Callback URL
- Click whether you want to enable the device flow
<img src="https://user-images.githubusercontent.com/2286304/252841283-9a846c68-46bb-4dac-8d1e-d35270c09f1b.png" alt="The GitHub screen that registers a new OAuth app" width="400">
- Log in to the admin
- Click on Social Applications
<img src="https://user-images.githubusercontent.com/2286304/204597123-3c8ae053-1ba8-4347-bacd-784fe52b2a04.png" alt="The Social Accounts section of the Django admin" width="400">
- Click **Add Social Application**
- Choose GitHub as the provider
- Enter a name like "GitHub OAuth Provider"
- Enter the Client ID from GitHub
- Go back to GitHub and generate a new Client Secret, then copy it into the **Secret Key** field. Choose the site as a **Chosen sites** and save.
<img src="https://user-images.githubusercontent.com/2286304/204648736-79aed1be-4b32-4946-be97-27e7c859603d.png" alt="Screenshot of where to get the Client ID and Client Secret" width="400">
It's ready!
**Working locally**: If you need to run through this flow multiple times, create a superuser so you can log into the admin. Then, log into the admin and delete your "Social Account" from the admin. This will test a fresh connection to GitHub for your logged-in GitHub user.
To test the flow including authorizing Github for the Boost account, log into your GitHub account settings and click **Applications** in the left menu. Find the "Boost" authorization and delete it. The next time you log into Boost with this GitHub account, you will have to re-authorize it.
<img src="https://user-images.githubusercontent.com/2286304/204642346-8b269aaf-4693-4351-9474-0a998b97689c.png" alt="The 'Authorized OAuth Apps' tab in your GitHub Applications" width="400">
#### Google
More detailed instructions at:
https://docs.allauth.org/en/latest/socialaccount/providers/google.html
Go to https://console.developers.google.com/ and create a new project. Create OAuth 2.0 credentials.
The client id is the full value including domain and tld.
For the "authorized javascript origins" values use:
* `http://localhost:8000`
For the "authorized redirect URIs" use:
* `http://localhost:8000/accounts/google/login/callback/`
* `http://localhost:8000/accounts/google/login/callback/?flowName=GeneralOAuthFlow`