add step when developer adds new app
This commit is contained in:
Son NK
Son NK
parent
5244678a16
commit
d600bbfec0
|
|
@ -1 +1 @@
|
|||
from .views import index, new_client, client_detail
|
||||
from .views import index, new_client, client_detail, step
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
{% extends 'default.html' %}
|
||||
|
||||
{% set active_page = "developer" %}
|
||||
|
||||
{% block title %}
|
||||
Step 1: Add SimpleLogin button
|
||||
{% endblock %}
|
||||
|
||||
{% block default_content %}
|
||||
<h1>Step 1: Add SimpleLogin button</h1>
|
||||
|
||||
<div>
|
||||
<p>The first step is to add the SimpleLogin button onto your website/application.</p>
|
||||
<p>
|
||||
SimpleLogin does not impose any hard guideline on the button color, font, etc
|
||||
but gives rather some recommendations on
|
||||
<a href="https://docs.simplelogin.io/step-1-add-simplelogin-button">Styling Guide</a>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<a href="{{ url_for('developer.handle_step',
|
||||
client_id=client_id,
|
||||
step='step-authorization-flow') }}"
|
||||
class="btn btn-primary">
|
||||
I have access to my back-end (Python, NodeJS, Php, etc)
|
||||
<i class="fe fe-arrow-right"></i>
|
||||
</a>
|
||||
|
||||
<div class="ml-4 mt-4 mb-4">OR</div>
|
||||
|
||||
<a href="{{ url_for('developer.handle_step',
|
||||
client_id=client_id,
|
||||
step='step-implicit-flow') }}" class="btn btn-azure">
|
||||
I do not have access to my back-end, my app is a SPA(Single-page application) or a mobile app.
|
||||
<i class="fe fe-arrow-right"></i>
|
||||
</a>
|
||||
|
||||
<div class="ml-4 mt-4 mb-4">OR</div>
|
||||
|
||||
<a class="btn btn-outline-info" href="{{ url_for('developer.client_detail', client_id=client.id) }}">
|
||||
I know what I need, just bring me to the app detail page 😎
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
{% extends 'default.html' %}
|
||||
|
||||
{% set active_page = "developer" %}
|
||||
|
||||
{% block title %}
|
||||
Step 2: Integrate SimpleLogin using OAuth2/OpenID
|
||||
{% endblock %}
|
||||
|
||||
{% block default_content %}
|
||||
<div>
|
||||
<h1>Step 2: Integrate SimpleLogin using OAuth2/OpenID</h1>
|
||||
<p>
|
||||
SimpleLogin will be integrated into your app using
|
||||
<a href="https://oauth.net/2/grant-types/authorization-code/" target="_blank">
|
||||
OAuth2 Authorization Code
|
||||
</a> flow.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
For more details on this flow, please consult our doc on:
|
||||
<a href="https://app.gitbook.com/@simplelogin/s/docs/step-3.2-back-end" target="_blank">
|
||||
Backend Integration
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>And if you already know this flow, here are the OAuth2 endpoints:</p>
|
||||
|
||||
<p>
|
||||
Authorization endpoint:
|
||||
<b>https://app.simplelogin.io/oauth2/authorize</b>
|
||||
<i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/authorize"></i>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Token endpoint:
|
||||
<b>https://app.simplelogin.io/oauth2/token</b>
|
||||
<i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/token"></i>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
UserInfo endpoint:
|
||||
<b>https://app.simplelogin.io/oauth2/userinfo</b>
|
||||
<i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/userinfo"></i>
|
||||
</p>
|
||||
|
||||
Please find below your OAuth Client-Id and Client-Secret that are needed for the <em>Authorization Code Flow</em>:
|
||||
<br>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">OAuth2 Client ID</label>
|
||||
|
||||
<div class="input-group mt-2">
|
||||
<input type="text" disabled value="{{ client.oauth_client_id }}" class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button
|
||||
data-clipboard-text="{{ client.oauth_client_id }}"
|
||||
class="clipboard btn btn-primary" type="button">
|
||||
<i class="fe fe-clipboard"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">OAuth2 Client Secret</label>
|
||||
|
||||
<div class="input-group mt-2">
|
||||
<input disabled type="password" value="{{ client.oauth_client_secret }}" class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button
|
||||
data-clipboard-text="{{ client.oauth_client_secret }}"
|
||||
class="clipboard btn btn-primary" type="button">
|
||||
<i class="fe fe-clipboard"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
By default, SimpleLogin whitelists <em>localhost</em> address that should facilitate the local development.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
We have created some examples along with a step-by-step guide on some framework/libraries,
|
||||
feel free to check them out:
|
||||
<br>
|
||||
<a href="https://docs.simplelogin.io/examples/integrate-simplelogin-using-passportjs">
|
||||
PassportJS (NodeJS)
|
||||
</a>
|
||||
<br>
|
||||
<a href="https://docs.simplelogin.io/examples/integrate-simplelogin-using-requests-oauthlib">Requests-OAuthlib
|
||||
(Python)
|
||||
</a>
|
||||
</p>
|
||||
|
||||
Once you finished SimpleLogin integration, do not forget to add your website as valid <em>redirect_uri</em>
|
||||
on the app detail page 😀 <br>
|
||||
|
||||
<a class="btn btn-success" href="{{ url_for('developer.client_detail', client_id=client.id) }}">
|
||||
App detail page
|
||||
<i class="fe fe-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
var clipboard = new ClipboardJS('.clipboard');
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
notie.alert({
|
||||
type: "success",
|
||||
text: "Copied to clipboard",
|
||||
time: 1,
|
||||
});
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
{% extends 'default.html' %}
|
||||
|
||||
{% set active_page = "developer" %}
|
||||
|
||||
{% block title %}
|
||||
Step 2: Integrate SimpleLogin using OAuth2/OpenID
|
||||
{% endblock %}
|
||||
|
||||
{% block default_content %}
|
||||
<div>
|
||||
<h1>Step 2: Integrate SimpleLogin using OAuth2/OpenID</h1>
|
||||
<p>SimpleLogin will be integrated into your app using
|
||||
<a href="https://oauth.net/2/grant-types/implicit/" target="_blank">OAuth 2.0 Implicit Grant</a> flow.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
For more details on this flow, please consult our doc on:
|
||||
<a href="https://docs.simplelogin.io/step-3.1-front-end" target="_blank">Frontend Integration</a>
|
||||
</p>
|
||||
|
||||
<p>And if you already know this flow, here are the corresponding endpoints:</p>
|
||||
|
||||
<p>
|
||||
Authorization endpoint:
|
||||
<b>https://app.simplelogin.io/oauth2/authorize</b>
|
||||
<i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/authorize"></i>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
UserInfo endpoint:
|
||||
<b>https://app.simplelogin.io/oauth2/userinfo</b>
|
||||
<i class="fe fe-clipboard clipboard" data-clipboard-text="https://app.simplelogin.io/oauth2/userinfo"></i>
|
||||
</p>
|
||||
|
||||
Please find below your OAuth Client-Id that is needed for the <em>Implicit Flow</em>
|
||||
<br>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">OAuth2 Client ID</label>
|
||||
|
||||
<div class="input-group mt-2">
|
||||
<input type="text" disabled value="{{ client.oauth_client_id }}" class="form-control">
|
||||
<span class="input-group-append">
|
||||
<button
|
||||
data-clipboard-text="{{ client.oauth_client_id }}"
|
||||
class="clipboard btn btn-primary" type="button">
|
||||
<i class="fe fe-clipboard"></i>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
By default, SimpleLogin whitelists <em>localhost</em> address that should facilitate the local development.
|
||||
</p>
|
||||
|
||||
Once you finished SimpleLogin integration, do not forget to add your website as valid <em>redirect_uri</em>
|
||||
on the app detail page 😀 <br>
|
||||
|
||||
<a class="btn btn-success" href="{{ url_for('developer.client_detail', client_id=client.id) }}">
|
||||
App detail page
|
||||
<i class="fe fe-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
<script>
|
||||
var clipboard = new ClipboardJS('.clipboard');
|
||||
|
||||
clipboard.on('success', function (e) {
|
||||
notie.alert({
|
||||
type: "success",
|
||||
text: "Copied to clipboard",
|
||||
time: 1,
|
||||
});
|
||||
|
||||
e.clearSelection();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
"""Onboarding for developer when creating new app"""
|
||||
from flask import render_template, flash, redirect, url_for
|
||||
from flask_login import login_required, current_user
|
||||
|
||||
from app.developer.base import developer_bp
|
||||
from app.models import Client
|
||||
|
||||
|
||||
@developer_bp.route("/client/<int:client_id>/<step>")
|
||||
@login_required
|
||||
def handle_step(client_id, step):
|
||||
client = Client.get(client_id)
|
||||
if not client:
|
||||
flash("no such client", "warning")
|
||||
return redirect(url_for("developer.index"))
|
||||
|
||||
if client.user_id != current_user.id:
|
||||
flash("you cannot see this client", "warning")
|
||||
return redirect(url_for("developer.index"))
|
||||
|
||||
return render_template(
|
||||
f"developer/steps/{step}.html", client_id=client_id, client=client
|
||||
)
|
||||
Loading…
Reference in New Issue