Skip to content

Quickstart django astro #2443

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 38 commits into from
Aug 30, 2023
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
d345e66
Added astro django menu entry for article
Aug 3, 2023
808d25b
Correct Rails to Flask typo
Aug 3, 2023
49a999f
Change references to new quickstart doc everywhere
Aug 3, 2023
3e14843
Work on python doc
Aug 3, 2023
86c16be
Getting old django quickstart to work
Aug 4, 2023
27e7f45
Old django quickstart now works complete in astro with code. Now to m…
Aug 4, 2023
641d25f
English
Aug 5, 2023
799e07d
English
Aug 5, 2023
069866b
Finished draft
Aug 7, 2023
40f98ed
text updates
rideam Aug 9, 2023
d1a9d8f
text updates
rideam Aug 9, 2023
a30669f
Python Django Quickstart language edit
worktheclock Aug 11, 2023
cf369fc
Merge pull request #121 from ritza-co/python-django-quickstart-langua…
sixhobbits Aug 11, 2023
8ffc232
Merge pull request #119 from ritza-co/update-quickstart_django_astro
sixhobbits Aug 11, 2023
f9985a5
Python Django Quickstart proofread
worktheclock Aug 11, 2023
5819bd1
Merge pull request #122 from ritza-co/python-django-quickstart-langua…
sixhobbits Aug 11, 2023
8e58610
Merge branch 'master' into quickstart_django_astro
sixhobbits Aug 11, 2023
59405fe
Update astro/src/content/quickstarts/quickstart-python-django-web.mdx
sixhobbits Aug 21, 2023
977aba9
Change we to you
Aug 21, 2023
01b0a5f
remove the django guide example from the example apps data file
Aug 21, 2023
8c94f58
Add rediretion for new guide
Aug 21, 2023
ad52e0d
Remove filename above code snippets
Aug 21, 2023
13abcdc
Remove ; from shell commands
Aug 21, 2023
f5ea3c3
Change absolute links to relative
Aug 21, 2023
b0974e2
Name file
Aug 21, 2023
4b56824
Remove integrate-python-django.adoc
Aug 21, 2023
6463f2f
Change from title case to start case
Aug 21, 2023
d5f2815
Tell Dan we don't need to cd at any point
Aug 21, 2023
7d39452
Explain why we are using venv
Aug 21, 2023
1363859
Remove unnecessary command to start Django server
Aug 21, 2023
c2b7bb9
Clarified all commands in directories
Aug 21, 2023
954f30b
Comments on windows
Aug 21, 2023
ccca1fb
Add warning about passwords in git
Aug 21, 2023
4ad7b80
fix relative urls
rideam Aug 21, 2023
17612ca
Revised Python Django Quickstart language edit
worktheclock Aug 21, 2023
0b33eb6
Merge pull request #125 from ritza-co/revised-python-django-quickstar…
sixhobbits Aug 22, 2023
61deeb2
Apply suggestions from code review
rideam Aug 25, 2023
f982202
update Elastic to Elasticsearch
rideam Aug 28, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions astro/.astro/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,13 @@ declare module 'astro:content' {
collection: "articles",
data: InferEntrySchema<"articles">
} & { render(): Render[".mdx"] },
"authentication/login-failures.md": {
id: "authentication/login-failures.md",
slug: "authentication/login-failures",
body: string,
collection: "articles",
data: InferEntrySchema<"articles">
} & { render(): Render[".md"] },
"authentication/multi-factor-authentication.md": {
id: "authentication/multi-factor-authentication.md",
slug: "authentication/multi-factor-authentication",
Expand Down Expand Up @@ -766,6 +773,14 @@ declare module 'astro:content' {
collection: "quickstarts",
data: InferEntrySchema<"quickstarts">
} & { render(): Render[".mdx"] },
"quickstart-python-django-web.mdx": {
id: "quickstart-python-django-web.mdx",
slug: "quickstart-python-django-web",

body: string,
collection: "quickstarts",
data: InferEntrySchema<"quickstarts">
} & { render(): Render[".mdx"] },
"quickstart-python-flask-web.mdx": {
id: "quickstart-python-flask-web.mdx",
slug: "quickstart-python-flask-web",
Expand Down
258 changes: 258 additions & 0 deletions astro/src/content/quickstarts/quickstart-python-django-web.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,258 @@
---
title: Python Django
description: Quickstart integration of Python Django web application with FusionAuth
navcategory: getting-started
prerequisites: Python 3.8 and pip3
section: web
technology: Django
language: Python
icon: /img/icons/python.svg
faIcon: fa-snake
color: yellow
cta: EmailListCTA
---
import Aside from '/src/components/Aside.astro';
import LoginAfter from '../../diagrams/quickstarts/login-after.astro';
import LoginBefore from '../../diagrams/quickstarts/login-before.astro';
import RemoteCode from '/src/components/RemoteCode.astro';


In this quickstart, you will build an application with Python and Django and integrate it with FusionAuth. The application is for [ChangeBank](https://www.youtube.com/watch?v=pkH-kD73QUM), a global leader in converting dollars into coins. It will have areas reserved for logged in users and public-facing sections.

Find the Docker Compose file and source code for the complete application at https://github.com/FusionAuth/fusionauth-quickstart-python-django-web.

## Prerequisites

For this Quickstart, you'll need:
* [Python3.8](https://www.python.org/downloads/) or later.
* [Docker](https://www.docker.com), which is the quickest way to start FusionAuth. (There are [other ways](https://fusionauth.io/docs/v1/tech/installation-guide/)).

## General Architecture

While this sample application doesn't have login functionality without FusionAuth, a more typical integration will replace an existing login system with FusionAuth.

In that case, the system might look like this before FusionAuth is introduced.

<LoginBefore alt={"Request flow during login before FusionAuth"}/>

The login flow will look like this after FusionAuth is introduced.

<LoginAfter alt={"Request flow during login after FusionAuth"}/>

In general, you would introduce FusionAuth to normalize and consolidate user data, making it consistent and up-to-date and offloading your login security and functionality to FusionAuth.

## Getting Started

Start with getting FusionAuth up and running and creating a new Django application.

### Clone the Code

First, grab the code from the repository and change into that directory.

```
git clone https://github.com/FusionAuth/fusionauth-quickstart-python-django-web.git
cd fusionauth-quickstart-python-django-web
```

### Run FusionAuth via Docker

You'll find a Docker Compose file `docker-compose.yml` and an environment variables configuration file `.env` in the root directory of the repo.

Assuming you have Docker installed on your machine, you can start FusionAuth on your machine with the following.

```
docker-compose up -d
```

This will start three containers, one each for FusionAuth, Postgres, and Elastic.

Here you are using a bootstrapping feature of FusionAuth, called [Kickstart](https://fusionauth.io/docs/v1/tech/installation-guide/kickstart). When FusionAuth starts for the first time, it will look at the `kickstart/kickstart.json` file and configure FusionAuth to your specified state.

<Aside type="note">
If you ever want to reset the FusionAuth system, delete the volumes created by `docker-compose` by executing `docker-compose down -v`, then rerun `docker- compose up -d`.
</Aside>

FusionAuth will be configured with these settings:
* Your client Id is `e9fdb985-9173-4e01-9d73-ac2d60d1dc8e`.
* Your client secret is `super-secret-secret-that-should-be-regenerated-for-production`.
* Your example username is `[email protected]` and the password is `password`.
* Your admin username is `[email protected]` and the password is `password`.
* The base URL of FusionAuth is `http://localhost:9011/`.

You can log in to the [FusionAuth admin UI](http://localhost:9011/admin) and look around if you want to, but with Docker and Kickstart, you don't need to.

### Create a Basic Django Application

Next, you'll set up a basic Django project with a single app. While this guide builds a new Django project, you can use the same method to integrate your existing project with FusionAuth.

#### Set Up Your Environment

We recommend working in a virtual environment for this.

```shell
python3 -m venv venv && source venv/bin/activate
```

Now create a `requirements.txt` file to list the project dependencies. (All the files in this guide already exist in the `complete-application` folder if you want to copy them.)

`requirements.txt`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks a bit weird. Can you say something like:

Suggested change
`requirements.txt`
Here's what `requirements.txt` should look like:

<RemoteCode url="https://raw.githubusercontent.com/FusionAuth/fusionauth-quickstart-python-django-web/main/complete-application/requirements.txt"
lang="shell" />

Then install the dependencies into your virtual environment.

```shell
pip install -r requirements.txt
```

#### Create the Application

Create the default Django starter project.

```shell
django-admin startproject mysite
```

Now create the `.env` file in your `mysite` folder and add the following to it (note that this is a different environment file to the one in the root folder used by Docker for FusionAuth).

`.env`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, a bit weird to have the file name hanging out.

<RemoteCode url="https://raw.githubusercontent.com/FusionAuth/fusionauth-quickstart-python-django-web/main/complete-application/mysite/.env"
lang="shell" />

Start your server.

```shell
python mysite/manage.py runserver
```

You can [visit the server](http://localhost:8000/) to ensure it is running, although it will not have content yet. If you need to stop it, hit control-C. You can leave the server running while you build your application so that you can see your progress.

## Authentication

Open a new terminal. It is easier to run commands from within your `mysite` directory, so `cd` into it.

```shell
source venv/bin/activate;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not use any ; on the shell commands, please.

cd mysite
```

Create an app within your `mysite` project. Make a `templates` directory to hold the HTML views and a `static` directory to hold the CSS files.

```shell
python manage.py startapp app;
mkdir app/templates;
mkdir app/static
```

Now you will work from the top down to set up authentication URLs in the project `settings.py`, then in the application `urls.py`, then the `views.py`, and finally, the HTML templates for the views.


### Project Settings

Overwrite your `mysite/settings.py` contents with the following code.

`settings.py`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same issue here with the filename hanging out without any context.

<RemoteCode url="https://raw.githubusercontent.com/FusionAuth/fusionauth-quickstart-python-django-web/main/complete-application/mysite/mysite/settings.py" lang="python" />

Here, your `app` and `mozilla_django_oidc` are added to the list of `INSTALLED_APPS`. The authentication library from Mozilla is set up by `mozilla_django_oidc` and the `OIDC_OP_` constants imported from the `.env` file. This automatically handles the interaction with FusionAuth on the endpoints configured in this file and the matching ones configured in the `kickstart.json` file that you used to initialize FusionAuth.

### Project URLs

Overwrite the `mysite/urls.py` file with the following code.

`urls.py`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same issue here with the filename hanging out without any context.

<RemoteCode url="https://raw.githubusercontent.com/FusionAuth/fusionauth-quickstart-python-django-web/main/complete-application/mysite/mysite/urls.py"
lang="python" />

* The `admin` site is the default Django admin.
* The `app` URLs are for the app you created in your project.
* The `oidc` URLs are automatically generated from the settings you configured in the previous step.

### App URLs

From this point, you'll work in the `app` not in the main project.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should you cd into that directory, then?


Create an `app/urls.py` file and set its content to match the project URLs.

`urls.py`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same issue here with the filename hanging out without any context.

<RemoteCode url="https://raw.githubusercontent.com/FusionAuth/fusionauth-quickstart-python-django-web/main/complete-application/mysite/app/urls.py"
lang="python" />

### App Views

Now overwrite the `app/views.py` file. There are three pages: the home page, the account page, and the make change page.

`views.py`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same issue here with the filename hanging out without any context.

<RemoteCode url="https://raw.githubusercontent.com/FusionAuth/fusionauth-quickstart-python-django-web/main/complete-application/mysite/app/views.py"
lang="python" />

Here's what these files do:

* The `app` view, or home page, redirects the user to the `account` view if they are already logged in.
* The `account` view checks whether the user is logged in. If the user is logged in, it returns the account page template, passing in the user's email address returned from FusionAuth. If the user isn't logged in, they are redirected to the login page. This also happens in the change page.
* The `logout` view is necessary because you need to clear the session for the user in Django after the user logs out of FusionAuth. FusionAuth sends the user to this view after logging them out, which then returns them to the home page.
* The `change` view looks longer only because it demonstrates how to do some calculations if the request is a POST instead of a GET. These calculations are then passed to the template in the `change` variable to display onscreen.

## Customization

The final step is to create the HTML pages and style them with CSS.

* Copy the `static` folder with its contents from `complete-application/mysite/app/static` to your `/mysite/app/static` location.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please provide commands for me to copy. Maybe state where you are running the commands from.

* Copy the `templates` folder with its contents from `complete-application/mysite/app/templates` to your `/mysite/app/templates` location.

There are only two lines in these templates related to authentication. In the home template, there is a login button.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
There are only two lines in these templates related to authentication. In the home template, there is a login button.
There are only two lines in these templates related to authentication. In the `home.html` template, there is a login button.


```html
<a class="button-lg" href="{% url 'oidc_authentication_init' %}">Login</a>
```
This URL is made available by the Mozilla plugin in the settings file. It directs the user to FusionAuth to log in, which then redirects back to your app account page.

In the account and change pages, there is a logout form.

```html
<form id="logoutForm" class="button-lg" action="{% url 'oidc_logout' %}" method="post">
{% csrf_token %}
<a class="button-lg" href="#" onclick="document.getElementById('logoutForm').submit();">Log out</a>
</form>
```
Log out has to be a form that submits a POST request to FusionAuth. Here we use an anchor element that is easy to style, but if your users might disable JavaScript, you could use a traditional form `input` element.

## Run the Application

Update the default SQLite database before testing.

```bash
python manage.py migrate
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

where do I need to be to run manage.py? I guess we didn't tell folks to cd anywhere, so I'm still supposed to be fusionauth-quickstart-python-django-web/mysite.

```

You can now browse to [the Django app](http://localhost:8000/app).

If the app is not running, you can use the following command.

```bash
source venv/bin/activate && python mysite/manage.py runserver
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would I do this in a new window? Why do I need the venv command? Where should I run this from?

Didn't I start the server up above and you haven't told me to stop it? I'm confused.

```

Log in using `[email protected]` and `password`. The change page will allow you to enter a number and see the result of the POST. Log out and verify that you can't browse to the [account page](http://localhost:8000/app/account) while logged out.

## Next Steps

This quickstart is a great way to get a proof of concept up and running quickly, but to run your application in production, there are some things you're going to want to do.

### FusionAuth Customization

FusionAuth gives you the ability to customize just about everything to do with the user's experience and the integration of your application. This includes:
* [Hosted pages](https://fusionauth.io/docs/v1/tech/themes/) such as login, registration, email verification, and many more.
* [Email templates](https://fusionauth.io/docs/v1/tech/email-templates/email-templates).
* [User data and custom claims in access token JWTs](https://fusionauth.io/articles/tokens/jwt-components-explained).

### Security

* You may want to customize the [token expiration times and policies](https://fusionauth.io/docs/v1/tech/oauth/#configure-application-oauth-settings) in FusionAuth.
* Choose [password rules](https://fusionauth.io/docs/v1/tech/core-concepts/tenants#password) and a [hashing algorithm](https://fusionauth.io/docs/v1/tech/reference/password-hashes) that meet your security needs.

### Tenant and Application Management

* Model your application topology using [Applications](https://fusionauth.io/docs/v1/tech/core-concepts/applications), [Roles](https://fusionauth.io/docs/v1/tech/core-concepts/roles), [Groups](https://fusionauth.io/docs/v1/tech/core-concepts/groups), [Entities](https://fusionauth.io/docs/v1/tech/core-concepts/groups), and more.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make all links to the FusionAuth site relative.

* Set up [MFA](https://fusionauth.io/docs/v1/tech/guides/multi-factor-authentication), [Social login](https://fusionauth.io/docs/v1/tech/identity-providers/), or [SAML](https://fusionauth.io/docs/v1/tech/identity-providers/samlv2/) integrations.
* Integrate with external systems using [Webhooks](https://fusionauth.io/docs/v1/tech/events-webhooks/), [SCIM](https://fusionauth.io/docs/v1/tech/core-concepts/scim), and [Lambdas](https://fusionauth.io/docs/v1/tech/lambdas/).
4 changes: 2 additions & 2 deletions astro/src/content/quickstarts/quickstart-python-flask-web.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Python Flask
description: Quickstart integration of Python Flask web application with FusionAuth
navcategory: getting-started
prerequisites: Python 3.8
prerequisites: Python 3.8 and pip3
section: web
technology: Flask
language: Python
Expand Down Expand Up @@ -43,7 +43,7 @@ The login flow will look like this after FusionAuth is introduced.
In general, you are introducing FusionAuth in order to normalize and consolidate user data. This helps make sure it is consistent and up-to-date as well as offloading your login security and functionality to FusionAuth.

## Getting Started
In this section, you'll get FusionAuth up and running and use Rails to create a new application.
In this section, you'll get FusionAuth up and running and use Flask to create a new application.

### Clone the Code
First off, grab the code from the repository and change into that directory.
Expand Down
7 changes: 0 additions & 7 deletions astro/src/pages/docs/quickstarts/quickstart-sections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,6 @@ const qsSections: QuickStartSection[] = [
anchorTag: 'web-application',
desc: 'Traditional web applications that run on servers',
articles: [
{
href: '/docs/v1/tech/tutorials/integrate-python-django',
title: 'Django',
icon: '/img/icons/python.svg',
faIcon: 'fa-snake',
navColor: 'orange'
},
{
href: '/blog/2022/03/07/single-sign-on-with-drupal',
title: 'Drupal',
Expand Down
2 changes: 1 addition & 1 deletion site/_layouts/doc.liquid
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-flutter.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-flutter">Flutter</a></li>
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-java-spring.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-java-spring">Java Spring</a></li>
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-laravel-api.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-laravel-api">Laravel API</a></li>
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-python-django.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-python-django">Python Django</a></li>
<li {% if page.url == "/docs/quickstarts/quickstart-python-django-web.html" %}class="active"{% endif %}><a href="/docs/quickstarts/quickstart-python-django-web">Python Django</a></li>
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-python-flask.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-python-flask">Python Flask</a></li>
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-react.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-react">React</a></li>
<li {% if page.url == "/docs/v1/tech/tutorials/integrate-ruby-rails.html" %}class="active"{% endif %}><a href="/docs/v1/tech/tutorials/integrate-ruby-rails">Ruby on Rails</a></li>
Expand Down
2 changes: 1 addition & 1 deletion site/docs/quickstarts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h2 class="docs-lp">Web Application</h2>
</div>
<div class="quickstart-tech-links">
<div class="w-layout-grid quickstart-tech-link-grid">
<a id="w-node-e2830e42-6739-d56f-6ab3-f46f4620292b-3d0acb82" href="/docs/v1/tech/tutorials/integrate-python-django" class="docs-lp-link-block shadow-removed quickstart w-inline-block"><img src="/assets/img/docs/landing/python.svg" loading="lazy" alt="" class="quickstart-tech-icon">
<a id="w-node-e2830e42-6739-d56f-6ab3-f46f4620292b-3d0acb82" href="/docs/quickstarts/quickstart-python-django-web" class="docs-lp-link-block shadow-removed quickstart w-inline-block"><img src="/assets/img/docs/landing/python.svg" loading="lazy" alt="" class="quickstart-tech-icon">
<div class="quickstart-tech-title">Django</div>
</a>
<a id="w-node-42830e42-6739-d56f-6ab3-f46f4620292b-3d0acb82" href="/docs/v1/tech/tutorials/integrate-python-flask" class="docs-lp-link-block shadow-removed quickstart w-inline-block"><img src="/assets/img/docs/landing/python.svg" loading="lazy" alt="" class="quickstart-tech-icon">
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
* link:/docs/v1/tech/tutorials/integrate-java-spring[Java Spring Quickstart]
* link:/docs/v1/tech/tutorials/integrate-expressjs[Express Quickstart]
* link:/docs/v1/tech/tutorials/integrate-python-django[Python Django Quickstart]
* link:/docs/quickstarts/quickstart-python-django-web[Python Django Quickstart]
* link:/docs/v1/tech/tutorials/integrate-python-flask[Python Flask Quickstart]
* link:/docs/v1/tech/tutorials/integrate-react[React Quickstart]
* link:/docs/v1/tech/tutorials/integrate-ruby-rails[All Quickstarts]
2 changes: 1 addition & 1 deletion site/docs/v1/tech/tutorials/index.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ Tutorials in the documentation section:
* link:/docs/v1/tech/tutorials/integrate-flutter[Integrate Flutter With FusionAuth]
* link:/docs/v1/tech/tutorials/integrate-java-spring[Integrate Java Spring With FusionAuth]
* link:/docs/v1/tech/tutorials/integrate-laravel-api[Integrate a Laravel API With FusionAuth]
* link:/docs/v1/tech/tutorials/integrate-python-django[Integrate Python Django With FusionAuth]
* link:/docs/quickstarts/quickstart-python-django-web[Integrate Python Django With FusionAuth]
* link:/docs/quickstarts/quickstart-python-flask-web[Integrate Flask With FusionAuth]
* link:/docs/v1/tech/tutorials/integrate-react[Integrate React With FusionAuth]
* link:/docs/quickstarts/quickstart-ruby-rails-web[Integrate Ruby on Rails With FusionAuth using Omniauth]
Expand Down
Loading