-
-
Notifications
You must be signed in to change notification settings - Fork 466
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
258 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@logto/console": minor | ||
--- | ||
|
||
add Ruby app guide |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
193 changes: 193 additions & 0 deletions
193
packages/console/src/assets/docs/guides/web-ruby/README.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,193 @@ | ||
import UriInputField from '@/mdx-components/UriInputField'; | ||
import InlineNotification from '@/ds-components/InlineNotification'; | ||
import { generateStandardSecret } from '@logto/shared/universal'; | ||
import Steps from '@/mdx-components/Steps'; | ||
import Step from '@/mdx-components/Step'; | ||
|
||
<Steps> | ||
|
||
<Step | ||
title="Add Logto SDK as a dependency" | ||
subtitle="Use your preferred method of adding gems" | ||
> | ||
|
||
```bash | ||
bundle add logto | ||
``` | ||
|
||
Or whatever your preferred method of adding gems is. | ||
|
||
</Step> | ||
|
||
<Step | ||
title="Initialize Logto client" | ||
subtitle="1 step" | ||
> | ||
|
||
<InlineNotification> | ||
|
||
The following demonstration is for Ruby on Rails. However, you can apply the same steps to other Ruby frameworks. | ||
|
||
</InlineNotification> | ||
|
||
In the file where you want to initialize the Logto client (e.g. a base controller or a middleware), add the following code: | ||
|
||
<pre> | ||
<code className="language-ruby"> | ||
{`require "logto/client" | ||
@client = LogtoClient.new( | ||
config: LogtoClient::Config.new( | ||
endpoint: "${props.endpoint}", | ||
app_id: "${props.app.id}", | ||
app_secret: "${props.app.secret}" | ||
), | ||
navigate: ->(uri) { a_redirect_method(uri) }, | ||
storage: LogtoClient::SessionStorage.new(the_session_object) | ||
) | ||
end`} | ||
</code> | ||
</pre> | ||
|
||
For instance, in a Rails controller, the code might look like this: | ||
|
||
<pre> | ||
<code className="language-ruby"> | ||
{`# app/controllers/sample_controller.rb | ||
require "logto/client" | ||
class SampleController < ApplicationController | ||
before_action :initialize_logto_client | ||
private | ||
def initialize_logto_client | ||
@client = LogtoClient.new( | ||
config: LogtoClient::Config.new( | ||
endpoint: "${props.endpoint}", | ||
app_id: "${props.app.id}", | ||
app_secret: "${props.app.secret}" | ||
), | ||
# Allow the client to redirect to other hosts (i.e. your Logto tenant) | ||
navigate: ->(uri) { redirect_to(uri, allow_other_host: true) }, | ||
# Controller has access to the session object | ||
storage: LogtoClient::SessionStorage.new(session) | ||
) | ||
end | ||
end`} | ||
</code> | ||
</pre> | ||
|
||
</Step> | ||
|
||
<Step | ||
title="Configure redirect URIs" | ||
subtitle="2 URIs" | ||
> | ||
|
||
First, let's enter your redirect URI. E.g. `http://localhost:3000/callback`. [Redirect URI](https://www.oauth.com/oauth2-servers/redirect-uris/) is an OAuth 2.0 concept which implies the location should redirect after authentication. | ||
|
||
<UriInputField name="redirectUris" /> | ||
|
||
After signing out, it'll be great to redirect user back to your website. For example, add `http://localhost:3000` as the post sign-out redirect URI below. | ||
|
||
<UriInputField name="postLogoutRedirectUris" /> | ||
|
||
</Step> | ||
|
||
<Step | ||
title="Handle the callback" | ||
subtitle="1 step" | ||
> | ||
|
||
<p> | ||
Since the redirect URI has been set to <code>{props.redirectUris[0] || 'http://localhost:3000/callback'}</code>, it needs to be handled it in our application. In a Rails controller, you can add the following code: | ||
</p> | ||
|
||
<pre> | ||
<code className="language-ruby"> | ||
{`# app/controllers/sample_controller.rb | ||
class SampleController < ApplicationController | ||
def ${props.redirectUris[0]?.split('/').pop() || 'callback'} | ||
@client.handle_sign_in_callback(url: request.original_url) | ||
end | ||
end`} | ||
</code> | ||
</pre> | ||
|
||
And configure the route in `config/routes.rb`: | ||
|
||
<pre> | ||
<code className="language-ruby"> | ||
{`Rails.application.routes.draw do | ||
get "${new URL(props.redirectUris[0] || 'http://localhost:3000/callback').pathname}", to: "sample#${props.redirectUris[0]?.split('/').pop() || 'callback'}" | ||
end`} | ||
</code> | ||
</pre> | ||
|
||
</Step> | ||
|
||
<Step | ||
title="Invoke sign-in and sign-out" | ||
> | ||
|
||
There are various ways to invoke sign-in and sign-out in your application. For example, you can implement two routes in your Rails application: | ||
|
||
<pre> | ||
<code className="language-ruby"> | ||
{`# app/controllers/sample_controller.rb | ||
class SampleController < ApplicationController | ||
def sign_in | ||
@client.sign_in(redirect_uri: request.base_url + "${new URL(props.redirectUris[0] || 'http://localhost:3000/callback').pathname}") | ||
end | ||
def sign_out | ||
@client.sign_out(post_logout_redirect_uri: request.base_url) | ||
end | ||
# ... | ||
end`} | ||
</code> | ||
</pre> | ||
|
||
```ruby | ||
# config/routes.rb | ||
Rails.application.routes.draw do | ||
get "/sign_in", to: "sample#sign_in" | ||
get "/sign_out", to: "sample#sign_out" | ||
|
||
# ... | ||
end | ||
``` | ||
|
||
Then you can create buttons or links in your views to trigger these actions. For example: | ||
|
||
```erb | ||
<!-- app/views/sample/index.html.erb --> | ||
<% if @client.is_authenticated? %> | ||
<a href="<%= sign_out_path %>">Sign out</a> | ||
<% else %> | ||
<a href="<%= sign_in_path %>">Sign in</a> | ||
<% end %> | ||
``` | ||
|
||
</Step> | ||
|
||
<Step title="Display user information"> | ||
|
||
To display the user's information, you can use the `@client.id_token_claims` method. For example, in a view: | ||
|
||
```erb | ||
<!-- app/views/sample/index.html.erb --> | ||
<% if @client.is_authenticated? %> | ||
<p>Welcome, <%= @client.id_token_claims["name"] %></p> | ||
<% else %> | ||
<p>Please sign in</p> | ||
<% end %> | ||
``` | ||
|
||
Please refer to the `#id_token_claims` method in the [gemdocs](https://gemdocs.org/gems/logto/latest) for more information. | ||
|
||
</Step> | ||
|
||
</Steps> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"order": 2 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { ApplicationType } from '@logto/schemas'; | ||
|
||
import { type GuideMetadata } from '../types'; | ||
|
||
const metadata: Readonly<GuideMetadata> = Object.freeze({ | ||
name: 'Ruby', | ||
description: | ||
'Ruby is a dynamic, open-source programming language with a focus on simplicity and productivity.', | ||
target: ApplicationType.Traditional, | ||
}); | ||
|
||
export default metadata; |
Binary file not shown.