Revamped homepage
This commit is contained in:
parent
00e7a9ac5c
commit
0fcbe0bb6d
web/src
@ -53,6 +53,7 @@
|
||||
<img :src="logoLight" style="height:50px;"/>
|
||||
<div>
|
||||
<v-btn size='small' class="ma-1 umami--click--support-button-footer" prepend-icon="mdi-party-popper" href="https://ko-fi.com/wilw88" target="_blank" rel="noopener noreferrer">Support SSO Tools</v-btn>
|
||||
<v-btn size='small' variant='outlined' dark href='https://git.wilw.dev/wilw/sso-tools' target='_blank' rel='noopener noreferrer' class="ma-1">Source code</v-btn>
|
||||
<v-btn size='small' variant='outlined' dark to='/privacy' class="ma-1">Privacy Policy</v-btn>
|
||||
<v-btn size='small' variant='outlined' dark to="/terms" class="ma-1">Terms of Use</v-btn>
|
||||
</div>
|
||||
|
||||
@ -3,16 +3,16 @@
|
||||
<div class="bg-indigo-lighten-5">
|
||||
<v-container class="d-block d-sm-flex align-center">
|
||||
<div class="w-auto pa-5">
|
||||
<h1 class="mb-5">Set-up and test single sign-on in your web, mobile, and desktop apps</h1>
|
||||
<p>With SSO Tools it is easy to spin-up your own custom identity providers, allowing you to start testing your <span class="bg-yellow-lighten-3 rounded-md pa-1">SAML2</span>, <span class="bg-yellow-lighten-3 rounded-md pa-1">OAuth2</span>, and <span class="bg-yellow-lighten-3 rounded-md pa-1">OpenID Connect</span> applications in minutes.</p>
|
||||
<v-btn class="mt-5" to="/idps/new" color="primary" prepend-icon="mdi-plus"> Create your own IdP</v-btn>
|
||||
<h1 class="mb-5">Implement and test single sign-on in your web, mobile, and desktop apps</h1>
|
||||
<p>With SSO Tools it is easy to spin-up your own custom identity providers, allowing you to start building and testing your <span class="bg-yellow-lighten-3 rounded-md pa-1">SAML2</span>, <span class="bg-yellow-lighten-3 rounded-md pa-1">OAuth2</span>, and <span class="bg-yellow-lighten-3 rounded-md pa-1">OpenID Connect</span> applications in minutes.</p>
|
||||
<v-btn class="mt-5" to="/idps/new" color="primary" prepend-icon="mdi-rocket"> Get started</v-btn>
|
||||
<div class="d-flex align-center mt-2">
|
||||
<v-icon icon="mdi-star" class="mr-2 text-primary" />
|
||||
<p><small>It's free & you don't have to register an account</small></p>
|
||||
</div>
|
||||
<div class="d-flex align-center mt-1">
|
||||
<v-icon icon="mdi-star" class="mr-2 text-primary" />
|
||||
<p><small>SSO Tools is fully open-source</small></p>
|
||||
<p><small>SSO Tools is <a href='https://git.wilw.dev/wilw/sso-tools' target='_blank' rel='noopener noreferrer'>fully open-source</a></small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-auto">
|
||||
@ -21,18 +21,48 @@
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-container>
|
||||
<div class="text-center mt-10 ml-5 mr-5">
|
||||
<h2>Get confident with your SSO apps</h2>
|
||||
<p>Develop and fully test out your applications with single sign-on to radically improve your offering for <strong>enterprise customers</strong>.</p>
|
||||
<p>SSO Tools is great for small SaaS organisations who need to learn about and <strong>provide federated authentication</strong> to their customers.</p>
|
||||
<v-container class="d-block d-sm-flex mt-10 mb-10">
|
||||
<div class="pa-5 rounded-lg bg-grey-lighten-4 flex-grow-1 elevation-15 ma-sm-5 mb-10 mb-sm-0">
|
||||
<h3>A full single sign-on suite</h3>
|
||||
<p>Use SSO Tools to create an identity provider that mimics the SSO capabilities of services like <span class="bg-yellow-lighten-3 rounded-md pa-1">Microsoft Active Directory</span>, <span class="bg-yellow-lighten-3 rounded-md pa-1">Stripe</span>, and <span class="bg-yellow-lighten-3 rounded-md pa-1">Facebook</span>.</p>
|
||||
<p class="mt-3">You can create apps, register users, build custom attributes, and more, to fully ensure your app has the SSO capabilities you need.</p>
|
||||
|
||||
<v-alert class="mt-5" size="small" color="primary"><strong>Top tip:</strong> Include SSO Tools in your local dev workflow and your CI/CD pipeline to help prevent regression.</v-alert>
|
||||
</div>
|
||||
|
||||
<div class="pa-5 rounded-lg bg-grey-lighten-4 flex-grow-1 elevation-15 ma-sm-5">
|
||||
<h3>Learn how to implement SSO</h3>
|
||||
<p>SSO Tools is simple and forgiving. Feel free to make as many mistakes as you need while you develop your solutions: SSO Tools does not enforce strict rate limiting on its IdPs.</p>
|
||||
<p class="mt-3">SSO Tools shows you the requests it receives and makes during the single sign-on flows, helping you to identify problems and debug your app.</p>
|
||||
|
||||
<div class="mt-5">
|
||||
<h4 class="mb-3">Learn how to implement:</h4>
|
||||
<v-btn class="mr-2 mb-2" size='small' to="/guides/oauth2" color="green">OAuth2 & OpenID Connect</v-btn>
|
||||
<v-btn class="mr-2 mb-2" size='small' color="green" disabled>SAML2 (coming soon...)</v-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</v-container>
|
||||
|
||||
|
||||
<div class="bg-indigo-lighten-5 pt-10 pb-10">
|
||||
<v-container>
|
||||
<h2>Why use SSO Tools?</h2>
|
||||
<p>Single sign-on is great for individuals and businesses. It offers extra security and greater control to its users.</p>
|
||||
<p class="mt-5">If you are building apps for businesses or enterprise customers, single sign-on is often an essential requirement in procurement. However, it can be hard to understand and implement.</p>
|
||||
<p class="mt-5">SSO Tools is a free resource aimed at helping people build and maintain SSO solutions in their applications - no matter if you are a solo developer or a member of a large software team.</p>
|
||||
|
||||
<v-btn class="mt-5" to="/idps/new" color="primary" prepend-icon="mdi-rocket">Get started</v-btn>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
<v-container>
|
||||
<div class="d-block d-sm-flex ml-5 ml-sm-16 mr-5 mr-sm-16 mt-16">
|
||||
<div class="w-auto mr-5 mb-5">
|
||||
<h2>Quick and simple: we focus on the essentials</h2>
|
||||
<p>Use the SSO Tools sandbox to quickly spin-up identity providers, register users and set-up your service providers in order to test the entire SSO lifecycle.</p>
|
||||
<p>You don't need to worry about signing up for complicated SSO providers, and <strong>you don't even need an account to get started</strong>.</p>
|
||||
<p>You don't need to worry about signing up for complicated or expensive SSO providers, and <strong>you don't even need an account to get started</strong>.</p>
|
||||
</div>
|
||||
<div class="w-auto">
|
||||
<img :src="usersImage" style="width:100%;border-radius:3px;box-shadow:0px 4px 10px rgba(0,0,0,0.2);" />
|
||||
@ -43,7 +73,7 @@
|
||||
<div class="w-auto">
|
||||
<img :src="secureImage" style="width:100%;border-radius:3px;box-shadow:0px 4px 10px rgba(0,0,0,0.2);" />
|
||||
</div>
|
||||
<div class="w-auto ml-5 mt-5">
|
||||
<div class="w-auto ml-5">
|
||||
<h2>Personalised and secure</h2>
|
||||
<p>Each of your identity providers is given its own path at our IdP subdomain, allowing you to easily separate different IdP configurations for testing different functions.</p>
|
||||
<h2 class="mt-5">Emulate a real-world IdP</h2>
|
||||
@ -56,44 +86,34 @@
|
||||
<div class="w-auto mr-5 mb-5">
|
||||
<h2>Follow industry standards</h2>
|
||||
<p>SSO Tools allows you to test your SSO implementations in your apps following protocols and standards used by the vast majority of large companies, educational institutions, government agencies, and more.</p>
|
||||
<p>We currently support the SAML2 protocol, which works well with your customers using LDAP and/or Microsoft Active Directory. Each IdP you create can have different settings to enable you to fully test out your services and your multi-tenancy support.</p>
|
||||
<p>Each IdP you create can have different settings to enable you to fully test out your services and your multi-tenancy support.</p>
|
||||
</div>
|
||||
<div class="w-auto">
|
||||
<img :src="samlImage" style="width:100%;border-radius:3px;box-shadow:0px 4px 10px rgba(0,0,0,0.2);" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column align-center bg-indigo-lighten-5 mt-16 pa-10 rounded-lg elevation-5">
|
||||
<div class="w-75">
|
||||
<h1>Features</h1>
|
||||
<p>SSO Tools is offered as a free service. For any questions, or to get in touch, please do so via <a href="mailto:hello@sso.tools" target="_blank" rel="noopener noreferrer">email</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="d-block d-sm-flex mt-10">
|
||||
<div class="mr-2">
|
||||
<v-list bg='none'>
|
||||
<v-list-item v-for="feature in features" :key="feature">
|
||||
<v-list-item-icon><v-icon icon="mdi-check-circle" class="text-green mr-2"/></v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
{{ feature }}
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 d-flex justify-center">
|
||||
<div class="w-75">
|
||||
<h1 class="mb-8">👋 Hi there, thanks for visiting</h1>
|
||||
<p class="mb-2">SSO Tools is created and maintained by a solo developer. During my work as part of a growing startup selling enterprise SaaS, the need for providing larger organisations with federated authentication became hugely important.</p>
|
||||
<p class="mb-2">I spent a lot of my spare time reading-up and learning about the different approaches to SSO via SAML2, with a focus on security whilst also making set-up easy for our customers.</p>
|
||||
<p class="mb-2">In my spare time I began working on SSO Tools so that I could easily test sign-on and logout flows across different use-cases.</p>
|
||||
<p class="mb-2">SSO Tools is free and open-source software, and you can <a href='https://git.wilw.dev/wilw/sso-tools' target='_blank' rel='noopener noreferrer'>check out the source code</a> if you are interested. <strong>I hope you find it useful!</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</v-container>
|
||||
|
||||
<div class="bg-indigo-lighten-5 mt-10 pt-10 pb-10">
|
||||
<v-container>
|
||||
<div class="text-center">
|
||||
<h1>Additional features</h1>
|
||||
<p>SSO Tools is offered as a free service. For any questions, or to get in touch, please do so via <a href="mailto:hello@sso.tools" target="_blank" rel="noopener noreferrer">email</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="d-block d-sm-flex mt-10 justify-center">
|
||||
<v-list class="bg-transparent">
|
||||
<v-list-item v-for="feature in features" :key="feature">
|
||||
<v-list-item-icon><v-icon icon="mdi-check-circle" class="text-green mr-2"/></v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
{{ feature }}
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -50,8 +50,6 @@
|
||||
</v-list>
|
||||
</v-card>
|
||||
|
||||
<v-btn block class="mt-5" to="/guides/oauth2">OAuth2 Setup Guide</v-btn>
|
||||
|
||||
<v-btn block class="mt-5" :href="`https://idp.sso.tools/${idp?.code}`" target="_blank" prepend-icon="mdi-open-in-new">Open IdP dashboard</v-btn>
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,10 +3,11 @@
|
||||
<h1>A guide to OAuth2 and OpenID Connect</h1>
|
||||
<p>Setting-up an OAuth2 app for the first time might seem daunting, but once you understand the flow you'll be easily able to implement single sign-on and OAuth2-based API access for your apps in no time.</p>
|
||||
|
||||
<v-alert class="mt-5 mb-5">
|
||||
<v-alert class="mt-8 mb-5">
|
||||
<h3>TL;DR?</h3>
|
||||
<p v-if="idp">If you're already familiar with OAuth2 and OpenID Connect, then <router-link :to="`/idps/${idp._id}/oauth`">check out the available URLs and scopes</router-link> to get started.</p>
|
||||
<p v-if="!idp">If you're already familiar with OAuth2 and OpenID Connect, then you can simply check out the available URLs and scopes directly from your SSO Tools IDP to get started.</p>
|
||||
<p v-if="!idp">If you're already familiar with OAuth2 and OpenID Connect, then you can simply check out the available URLs and scopes directly from your SSO Tools IdP dashboard to get started.</p>
|
||||
<v-btn v-if="!idp" class="mt-8" to="/idps/new" color="primary" prepend-icon="mdi-rocket">Get started</v-btn>
|
||||
</v-alert>
|
||||
|
||||
<h3>OAuth2 Overview</h3>
|
||||
@ -16,14 +17,14 @@
|
||||
|
||||
<p class="mt-4">Some IDPs may also issue an "access token" during the authentication process. This token can be used for ongoing communication between the two services. For example, the app might use the access token to retrieve or update the user's profile on the IdP, or carry out other actions (such as handling a payment with Stripe).</p>
|
||||
|
||||
<h3 class="mt-5">What is the OpenID Connect part about?</h3>
|
||||
<h3 class="mt-8">What is the OpenID Connect part about?</h3>
|
||||
<p>OpenID Connect acts as an extension to OAuth2. Implementations of this standard seem to vary, but the general idea is that the calling app requests an additional "openid" scope from the IdP. If granted, the IdP will issue a special ID token, encoded with useful information about the user, back to the app after a successful authorization is complete.</p>
|
||||
<p class="mt-4">Under this approach, the app can avoid having to do additional lookups (using the access token) to the IdP in order to retrieve the required user profile information to log the user in.</p>
|
||||
<p class="mt-4">SSO Tools supports OAuth2 with or without OpenID Connect.</p>
|
||||
|
||||
<h3 class="mt-5">A simplified OAuth2 flow</h3>
|
||||
<h3 class="mt-8">A simplified OAuth2 flow</h3>
|
||||
<p>A user "logging-in" via OAuth2 will cause the following steps to occur.</p>
|
||||
<ol class="mt-3">
|
||||
<ol class="mt-5">
|
||||
<li>The user visits the app (e.g. a website or mobile app). The app shows an option to login via OAuth2 (e.g. "Login with Facebook" or "Login with Your App").</li>
|
||||
<li>The user selects this option and is redirected to the IdP (e.g. "Facebook" or "Your App") to authenticate themselves. Usually this would involve logging-in with a username and password. The app includes a list of scopes to ask for in its request.</li>
|
||||
<li>After a successful login, the IdP displays the scopes requested by the app, and asks the user to authorize the IdP to provide the requested information or permissions on the user's behalf.</li>
|
||||
@ -33,14 +34,14 @@
|
||||
<li>The app can read the ID token to retrieve user details in order to match or setup an account for the user, and to log the user in. If an access token is also included, the app can use this for ongoing communication with the IdP if required.</li>
|
||||
</ol>
|
||||
|
||||
<h3 class="mt-5">Implementing the OAuth2 flow in your app</h3>
|
||||
<h3 class="mt-8">Implementing the OAuth2 flow in your app</h3>
|
||||
<p>The following steps describe how to implement OAuth2 SSO in your app using an IdP, such as one provided by SSO Tools.</p>
|
||||
|
||||
<h4 class="mt-3">Step 1: Create an IdP and an app declaration</h4>
|
||||
<h4 class="mt-5">Step 1: Create an IdP and an app declaration</h4>
|
||||
<p>In SSO Tools, follow the steps to create a new IdP and app (service provider). In this guide we'll assume your IdP's issuer (code) is `myidp`.</p>
|
||||
<p class="mt-4">When creating your app, you'll need to provide a "redirect URI". This the place the user will be redirected back to after successful authentication. If you don't know this right away, you can always change it later.</p>
|
||||
|
||||
<h4 class="mt-3">Step 2: Redirect the user to the IdP to authenticate</h4>
|
||||
<h4 class="mt-5">Step 2: Redirect the user to the IdP to authenticate</h4>
|
||||
<p>In your app, create a button or link that redirects the user to the IdP's "authorization URL". In SSO Tools, these take the form of "https://idp.sso.tools/ISSUER/oauth2/authorize", replacing "ISSUER" with the issuer code for your IdP (e.g. "myidp").</p>
|
||||
<p class="mt-4">Along with this request, you'll have to include some additional query parameters:</p>
|
||||
<ul class="mt-4">
|
||||
@ -53,15 +54,15 @@
|
||||
<p class="mt-4">As such, an example request to redirect the user to on SSO Tools could look like the following:</p>
|
||||
<p class="mt-4">https://idp.sso.tools/myidp/oauth2/authorize?client_id=abc123&scope=profile,email,openid&redirect_uri=https://myapp.com/oauth/callback&response_type=code</p>
|
||||
|
||||
<h4 class="mt-3">Step 3: The user authenticates</h4>
|
||||
<h4 class="mt-5">Step 3: The user authenticates</h4>
|
||||
<p>Your app can relax for a bit now, since the IdP now takes over in handling the user's authentication and seeking approval for the scopes your app has requested.</p>
|
||||
|
||||
<h4 class="mt-3">Step 4: Receive the user back after authentication</h4>
|
||||
<h4 class="mt-5">Step 4: Receive the user back after authentication</h4>
|
||||
<p>Assuming all went well with the authentication, the IdP will now redirect the user back to your app at the redirect URI you specified. If you don't yet have a route to handle this, then you should create one now and ensure this is registered in the app on SSO Tools and included in your request in Step 2.</p>
|
||||
<p class="mt-4">When the user arrives back, they'll have a `code` parameter in their request URL. For example, if your redirect URI is "https://myapp.com/oauth/callback" your app will receive a request at "https://myapp.com/oauth/callback?code=xzy321"</p>
|
||||
<p class="mt-4">Your app should read this code and make it available for the next step</p>
|
||||
|
||||
<h4 class="mt-3">Step 5: Request a token from the IdP</h4>
|
||||
<h4 class="mt-5">Step 5: Request a token from the IdP</h4>
|
||||
<p>Next, your app will need to make a request directly to the IdP on its "token" endpoint. On SSO Tools, these endpoints look like "https://idp.sso.tools/ISSUER/oauth2/token". To this endpoint, your app should send an HTTP `POST` request containing the following data in JSON format:</p>
|
||||
<ul class="mt-4">
|
||||
<li>`code`: The code received in Step 4.</li>
|
||||
@ -86,7 +87,7 @@ Content-Type: application/json
|
||||
</pre>
|
||||
<p class="mt-4">Assuming all went well, the response to the request should contain an `access_token` field (containing a string representing an access token usable against the SSO Tools API for the IdP). If the "openid" scope was requested the response will also include an "id_token" field (containing a string representing a JWT that can be decoded to retrieve the user profile information requested by the scope).</p>
|
||||
|
||||
<h4 class="mt-3">Step 6 (optional): Interact with the IdP's API</h4>
|
||||
<h4 class="mt-5">Step 6 (optional): Interact with the IdP's API</h4>
|
||||
<p>Depending on your setup, Step 5 might be the last step needed to complete single sign-on with OAuth2 and OpenID Connect. If your app needs to then communicate with an API for additional data flow (e.g. to power an integration), then read on.</p>
|
||||
<p class="mt-4">The "access_token" received in Step 5 can now be used against the IdP's API in order to retrieve the user's information. To do so, include the access token in the Authorization header and send off a request to "https://idp.sso.tools/ISSUER/api/users/me".</p>
|
||||
<p class="mt-4">For example, given the above information, your request could look like this:</p>
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container>
|
||||
|
||||
|
||||
<v-container class="ml-auto mr-auto" style="max-width: 600px">
|
||||
<div v-if="page === 0">
|
||||
<div style="text-align:center; margin-bottom: 30px;">
|
||||
<h1>Create a new identity provider (IdP)</h1>
|
||||
<h1 class="mb-10">Create a new identity provider (IdP)</h1>
|
||||
<p>IdPs are the core of the single sign-on system. They maintain user identities (profile information and passwords) and are where the actual user authentication takes place.</p>
|
||||
<p>You can connect your apps (service providers) to your IdP in order to give them single sign-on functionality.</p>
|
||||
</div>
|
||||
@ -14,8 +12,8 @@
|
||||
<p>A human-friendly identifier you can use to recognise the IdP.</p>
|
||||
<v-text-field v-model="name" label="Friendly name" required autofocus ></v-text-field>
|
||||
|
||||
<h3>Issuer & IdP location</h3>
|
||||
<p>This is a URL that uniquely identifies the IdP on the Internet. We'll host it at the idp.sso.tools subdomain with a path of your choice. The path must be unique and "URL friendly" (i.e. generally letters and numbers).</p>
|
||||
<h3>Issuer name</h3>
|
||||
<p>This is a unique machine-friendly name (letters and numbers only) for your IdP. We'll use this to host your IdP on the internet, and it can always be changed later.</p>
|
||||
<v-text-field v-model="code" label="Issuer" required placeholder="myidp" prefix="https://idp.sso.tools/" ></v-text-field>
|
||||
|
||||
<v-alert type="info" :value="true" v-if="!loggedIn">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user