Authorize Web Application

• Sign in to Mekarge A3 Console

1Create API Resource

1. Navigate to Authorization → Resources → Create
2. Click Create under the API tile
3. Name the new Resource (i.e. My API) and its Resource URI (i.e. api:myapi)
4. Select a lifetime for Access Tokens issued for this Resource (i.e. 3600)
5. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if Resource URI is taken before

2Add Scope

1. Navigate to Authorization → Resources
2. Click ⋮ at the end of the newly created row and select View Details
3. Navigate to Scopes tab
4. Define a Scope (i.e. action:call) under Scope Name and click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if same Scope Name is used before

3Create Role

1. Navigate to Authorization → Roles → Create
2. Name the new Role (i.e. basic)
3. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if Role Name is taken before

4Create Data Source

1. Navigate to Authentication → Data Sources → Create
2. Click Create under the Hosted Database tile
3. Name the new Data Source (i.e. My DB) and its alias (i.e. db)
4. Select a lifetime for ID Tokens for the Users defined in this Data Source (i.e. 86400)
5. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if Data Source Alias is taken before

5Create User Group

1. Navigate to Authentication → User Groups → Create
2. Name the new User Group (i.e. users)
3. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if User Group Name is taken before
4. Navigate to Authentication → User Groups
5. Click ⋮ at the end of the newly created row and select View Details
6. Navigate to Roles tab
7. Select the Role (i.e. basic) created in the previous steps and click Add

6Create User

1. Navigate to Authentication → Users → Create
2. Select the User Group (i.e. users) created in the previous steps
3. Select E-Mail as User Login Type
4. Set an E-Mail address (i.e. johndoe@test.com) as User Login Identifier
5. Set a Password (i.e. secret) as User Password
6. Set Default Locale to en
7. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if a User with the same User Login Identifier is defined before

7Add User Information

1. Navigate to Authentication → Users
2. Click Scan
3. Click the icon at the end of the newly created row
4. Navigate to Claim Set tab
5. Set en for Claim Set Locale and click Create
ⓘ Possible Issues
• Creation will be rejected if Locale is used before
6. Click the edit icon at the end of the newly created row that will appear at the Defined Claim Sets section
7. Navigate to Custom Claims tab on the second section
8. Set the new Claim Name (i.e. name) and Claim Value (i.e. John Doe) and click Put Claim
9. Click Commit at the end of the page

8Create UI Collection

1. Navigate to User Interface → UI Collections → Create
2. Name the new Collection (i.e. default)
3. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if Collection Name is taken before

9Create Login Page

1. Navigate to User Interface → Web Components → Create
2. Click Create under the Login Page Component
3. Select the UI Collection (i.e. default) created in the previous steps
4. Set en for Locale and click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
• Creation will be rejected if there is already a Login Page defined with en Locale defined before
5. Navigate to User Interface → Web Components
6. Click ⋮ at the end of the newly created row and select View Details
7. Click Heading Variables tab on the second section
8. Change Heading (i.e. Quick Start Demo) and click Publish at the end of the page

10Create Client

1. Navigate to Authorization → Clients → Create
2. Click Create under the Web Application tile
3. Name the new Client (i.e. My Web App)
4. Select Post (Http Body) as Client Authentication Type
5. Click Create
ⓘ Possible Issues
• Creation will be rejected if you exceed your quota
6. Navigate to Authorization → Clients
7. Click ⋮ at the end of the newly created row and select View Details
8. Navigate to Features tab
9. Activate Enable PKCE and click Update
💡 Hints
Activate Enable PKCE to improve the security of Authorization Code flows involving User Agents. Read more about PKCE in RFC 7636
10. Activate Enable OpenID and click Update
💡 Hints
Activate Enable OpenID to allow ID Token issuance.
11. Navigate to Redirections tab
12. Set https://127.0.0.1:8000/callback ⚠ for Redirection URL and click Add
13. Navigate to Permissions tab
14. Select the Resource (i.e. My API) → Select the Scope (i.e. action:call) → Click Grant
15. Click the edit icon at the end of the newly created row that will appear at the Permission List section
16. Select the Role (i.e. basic) created in the previous steps and click Add
17. Click Back To Client
18. Navigate to Data Sources tab
19. Select the Data Source (i.e. My DB) created in the previous steps and click Select
20. Navigate to UI Collections tab
21. Select the UI Collection (i.e. default) created in the previous steps and click Select

11Clone Repository

1. Run the following command to clone the Reference Implementation for the Web Application

git clone https://github.com/mekargeoss/a3-ri-webapp-python

12Install Dependencies

1. Run the following commands to install dependencies

python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

13Populate the .env File

1. Navigate to Environments
2. Click ⋮ at the end of the current Environment and select View Details
3. Copy the Issuer Path from Environment Info section to set ISSUER_PATH
4. Navigate to Authorization → Clients
5. Click ⋮ at the end of the previously created row and select View Details
6. Copy the Client Id from Client Credentials section to set CLIENT_ID
7. Copy the Client Secret from Client Credentials section to set CLIENT_SECRET
8. Navigate to Redirections tab
9. Copy the redirection entry from Redirection URLs section to set REDIRECT_URI
⚠ Checks
Redirection URL was set as https://127.0.0.1:8000/callback in previous steps
10. Navigate to Authorization → Resources
11. Click ⋮ at the end of the previously created row and select View Details
12. Copy the Resource Uri from Resource Information section to set RESOURCE_URI
13. Fill out the .env file with the information collected above

ISSUER_PATH=
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=
RESOURCE_URI=

14Create a Self-Signed Certificate

1. Create a private key and certificate for the Web Application (You can skip this step if you already have key and certificate).

openssl req -x509 -newkey rsa:2048 -sha256 -days 365 \
  -nodes -keyout server.key -out server.crt \
  -subj "/C=TR/ST=Example/L=ExampleCity/O=Example/OU=Dev/CN=localhost" \
  -addext "subjectAltName=DNS:localhost,IP:127.0.0.1"

15Start Server

1. Run the following command to start the server

uvicorn app.main:app \
  --host 0.0.0.0 \
  --port 8000 \
  --ssl-keyfile server.key \
  --ssl-certfile server.crt

15Test the Login Flow

1. Open https://127.0.0.1:8000/ in your browser
💡 Hints
You might see certificate warning if you use the generated the certificate at step 14. You can skip warning and continue to the site.
2. Click Login to start Authorization Flow
3. Use the E-Mail address and Password used while creating the User to log in