Skip to content

Commit

Permalink
update Open Source Docs from Roblox internal teams
Browse files Browse the repository at this point in the history
  • Loading branch information
rbx-open-source-docs[bot] committed Oct 6, 2023
1 parent 0ad584f commit c4231d7
Show file tree
Hide file tree
Showing 29 changed files with 357 additions and 343 deletions.
2 changes: 2 additions & 0 deletions content/common/navigation/cloud/guides.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ navigation:
path: /cloud/open-cloud/oauth2-registration
- title: Implementation
path: /cloud/open-cloud/oauth2-develop
- title: Sample App
path: /cloud/open-cloud/oauth2-sample
- title: API Keys
path: /cloud/open-cloud/api-keys
- heading: V2 Resources (Beta)
Expand Down
20 changes: 7 additions & 13 deletions content/common/navigation/engine/guides.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -298,12 +298,8 @@ navigation:
- title: Overview
path: /input/
- title: Mouse and Keyboard
section:
- title: Overview
path: /input/mouse-and-keyboard
- title: Customizing Mouse Icons
path: /input/customizing-mouse-icons
- title: Mobile Input
path: /input/mouse-and-keyboard
- title: Mobile
path: /input/mobile
- title: Gamepad
path: /input/gamepad
Expand Down Expand Up @@ -338,7 +334,11 @@ navigation:
- title: Buttons
path: /ui/buttons
- title: Text Input
path: /ui/text
path: /ui/text-input
- title: Proximity Prompts
path: /ui/proximity-prompts
- title: Drag Detectors
path: /ui/drag-detectors
- title: Video Assets
path: /ui/video-assets
- title: Layout and Design
Expand All @@ -357,10 +357,6 @@ navigation:
path: /ui/cross-platform-design
- title: UI Animation
path: /ui/animation
- title: Proximity Prompts
path: /ui/proximity-prompts
- title: Drag Detectors
path: /ui/drag-detectors
- title: Text Filtering
path: /ui/text-filtering
- title: Loading Screens
Expand All @@ -383,7 +379,6 @@ navigation:
path: /animation/inverse-kinematics
- title: Using Animations
path: /animation/using

- title: Chat
section:
- title: Spatial Voice
Expand All @@ -398,7 +393,6 @@ navigation:
path: /chat/bubble-chat
- title: Migrating to In-Experience Text Chat
path: /chat/migrate-to-in-experience-text-chat

- title: Cloud Services
section:
- title: Data Stores
Expand Down
6 changes: 4 additions & 2 deletions content/en-us/art/accessories/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ Custom accessories are first created in 3D modeling programs, such as [Blender](
- A basic background with 3D modeling tools such as [Blender](https://www.blender.org/) or [Maya](https://www.autodesk.com/products/maya/overview).
- An understanding of the [components that make up an accessory](#components-of-an-accessory).
- An understanding of the general [accessory creation process](#creation-process).
- Review the [clothing creation tutorial](../../art/accessories/creating/index.md), a step-by-step process of creating your own avatar-ready clothing from scratch in Blender.
- Review Roblox's official tutorials to create your own accessories:
- [Rigid accessory creation tutorial](../../art/accessories/creating-rigid/index.md) - covers each process required for converting a 3D model to a rigid accessory and publishing it to the Marketplace.
- [Clothing creation tutorial](../../art/accessories/creating/index.md) - a step-by-step process of creating your own avatar-ready clothing from scratch in Blender.
- [Additional tools, resources, and guides](#resources) provided by Roblox to standardize and expedite the creation process.

### Components of an Accessory
Expand Down Expand Up @@ -116,7 +118,7 @@ If you are interested in specific avatar creation topics, use the following tabl
<tbody>
<tr>
<td>Tutorials</td>
<td>[Basic Clothing Creation](../../art/accessories/creating/index.md)</td>
<td>[Rigid Accessory Creation](../../art/accessories/creating-rigid/index.md) <br /><br />[Basic Clothing Creation](../../art/accessories/creating/index.md)</td>
</tr>
<tr>
<td>Reference Files</td>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Git LFS file not shown
2 changes: 1 addition & 1 deletion content/en-us/avatar/tutorials.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ style={{position: "relative"}}>
</Grid>
</>

<a href="../art/accessories/creating">
<a href="../art/accessories/creating-rigid">
<Button
variant="contained"
size="large">
Expand Down
79 changes: 79 additions & 0 deletions content/en-us/cloud/open-cloud/oauth2-sample.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
---
title: OAuth 2.0 Sample App
description: Provides a working OAuth 2.0 sample application.
---

Roblox provides a Node.js sample app that shows how to use OAuth 2.0 to let users log in to their Roblox accounts. This app uses the [authorization code flow _without_ PKCE](oauth2-overview.md#grant-types) and is thus only suitable for confidential clients, such as private servers.

<a href="/assets/open-cloud/open-cloud-nodejs-sample-oauth2-main.zip">
<Button variant="contained">Get the Code</Button>
</a>

<br />

After downloading the `.zip` file, extract it to its own folder.

## Registering the App

The first step to setting up the app is to [register it on the Roblox website](oauth2-registration.md) and copy the client ID and secret somewhere safe. Then follow the standard registration steps with these settings:

1. Under **Permissions**, add the `openid` and `profile` scopes.
1. Under **Redirect URLs**, add the `http://localhost:3000/oauth/callback` redirect. If you want to use a non-default port for your app, specify it here.

## Setting Environment Variables

Rather than storing them in code (not recommended), the app uses environment variables for your client ID and secret. The process for adding environment variables differs by operating system.

On Windows, run the following PowerShell commands:

```powershell
$env:ROBLOX_CLIENT_ID='your_client_id_here'
$env:ROBLOX_CLIENT_SECRET='your_client_secret_here'
$env:ROBLOX_PORT=3000 # Optional. Default is 3000.
```

On macOS and most Linux distributions, run these commands at the terminal:

```bash
export ROBLOX_CLIENT_ID=your_client_id_here
export ROBLOX_CLIENT_SECRET=your_client_secret_here
export ROBLOX_PORT=3000 # Optional. Default is 3000.
```

If you specified a non-default port in the redirect URL when registering your app, be sure to add the `ROBLOX_PORT` variable.

<Alert severity="info">
These commands only set environment variables for the duration of your terminal session. If you want to load these variables every time you open a new terminal window, add the commands to your shell configuration file, such as `.zshrc` or `.bashrc`. Many hosting services have features to help you add environment variables to your servers.
</Alert>

## Installing Dependencies

The app has a handful of dependencies, visible in `package.json`. To install them, run:

```bash
npm ci
```

## Running the App

To start the app, run:

```bash
npm start
```

Then navigate to `http://localhost:3000` (or your non-default port) in a web browser.

The app immediately redirects you to the Roblox login screen, at which point you can log in, verify the permissions that the app is requesting, and click **CONFIRM AND GIVE ACCESS**.

Roblox then redirects you back to `localhost`, where you can see that the app now displays some minimal user information and a link back to your profile on Roblox.

### About the App

In broad strokes, `index.js` performs the following operations:

1. Starts a new web server using `express`.
1. Retrieves the Roblox OpenID Connect (OIDC) configuration, which includes endpoints for authorization, user information, etc. For more information about these endpoints, see [OAuth 2.0 Authentication](../reference/oauth2.md).
1. Creates a new Open ID client using `openid-client` and your stored credentials. This client dramatically simplifies the process of properly forming and sending HTTP requests to the various OAuth 2.0 endpoints.
1. Defines the various routes for the app, including redirects for the login and logout flows and the OAuth 2.0 callback.
1. After a successful login, stores the various tokens as cookies, along with some minimal user information that it displays as HTML with help from `getHomeHtml.js`.
27 changes: 14 additions & 13 deletions content/en-us/cloud/reference/oauth2.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@ description: Describes how to make authenticated calls to Open Cloud with API ke
---

<Alert severity="warning">
OAuth 2.0 authentication is a beta feature that might be subject to change for
future releases. All Open Cloud endpoints also support [API Key authentication](../open-cloud/api-keys.md).
OAuth 2.0 authentication is a beta feature that might be subject to change for
future releases. All Open Cloud endpoints also support
[API key authentication](../open-cloud/api-keys.md).
</Alert>

<Alert severity="info">
For complete implementation guides and information
on OAuth 2.0, see the [OAuth 2.0 Overview](../open-cloud/oauth2-overview.md).
For complete implementation guides and information on OAuth 2.0, including a
sample app, see the [OAuth 2.0 Overview](../open-cloud/oauth2-overview.md).
</Alert>

This document describes endpoints that you call to implement the OAuth 2.0
authorization code flow as well as other endpoints useful for implementing
authorization code flow, as well as other endpoints useful for implementing
authentication in your apps.

```http title="Base URL"
Expand Down Expand Up @@ -316,14 +317,14 @@ curl --location --request GET 'https://apis.roblox.com/oauth/v1/userinfo' \
You can use the `sub` value to uniquely identify the user. Users can change
their Roblox username and display name, so don't use them as unique identifiers to refer to users on your app.

| Claim | Description |
| ------------------ | ----------------------------------------- |
| sub | Roblox user ID. |
| name | Roblox display name. |
| nickname | Roblox display name. |
| preferred_username | Roblox username. |
| created_at | Creation time of the Roblox account as a Unix timestamp. |
| profile | Roblox account profile URL. |
| Claim | Description |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| sub | Roblox user ID. |
| name | Roblox display name. |
| nickname | Roblox display name. |
| preferred_username | Roblox username. |
| created_at | Creation time of the Roblox account as a Unix timestamp. |
| profile | Roblox account profile URL. |
| picture | Roblox avatar headshot image. Can be null if the avatar headshot image hasn't yet been generated or has been moderated. |

```json title="Example User with Profile Scope"
Expand Down
2 changes: 1 addition & 1 deletion content/en-us/cloud/reference/patterns.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ either user or role in the following formats:
- **Role filter**: `filter="role == 'groups/123/roles/7920705'"`

If you specify the wildcard character for the group ID, you must filter
memberships by user (up to 5) in the following format:
memberships by user (up to 50) in the following format:

- **User filter**: `filter="user in ['users/1', 'users/156', 'users/9876543210', ...]"`

Expand Down
52 changes: 0 additions & 52 deletions content/en-us/input/customizing-mouse-icons.md

This file was deleted.

4 changes: 2 additions & 2 deletions content/en-us/input/gamepad.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: Gamepad
title: Gamepad Input
description: Explains how to accept input from USB gamepads, such as Xbox and PlayStation controllers.
---

Expand Down Expand Up @@ -84,7 +84,7 @@ There are three ways to receive input from a gamepad:

### ContextActionService

You can use `Class.ContextActionService` for binding controls to both gamepads and other input sources such as [mobile touchscreen buttons](../input/mobile.md#adding-mobile-buttons) or binding multiple functions to a single button input on any device. For example, use `Class.ContextActionService` to bind an OpenSpellBook action to the right trigger (R2) on a gamepad and the B key on a keyboard in one function.
You can use `Class.ContextActionService` for binding controls to both gamepads and other input sources such as [mobile touchscreen buttons](../input/mobile.md) or binding multiple functions to a single button input on any device. For example, use `Class.ContextActionService` to bind an OpenSpellBook action to the right trigger (R2) on a gamepad and the B key on a keyboard in one function.

Use the following code sample to bind an OpenSpellBook action to the gamepad's R2 button and the B key on the keyboard:

Expand Down
6 changes: 3 additions & 3 deletions content/en-us/input/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Once you're comfortable with testing and developing your inputs on mouse and
keyboard, make your experience compatible with multiple platforms by setting up
mobile and gamepad inputs.

See [Mouse and Keyboard](../input/mouse-and-keyboard.md) for more
See [Mouse and Keyboard Input](../input/mouse-and-keyboard.md) for more
information on setting up your first custom inputs.

## Mobile
Expand All @@ -34,7 +34,7 @@ You can bind a single action to a traditional PC input and create an on-screen
button for touchscreen devices. You can also dynamically update input behavior
so that inputs trigger certain actions only in certain contexts.

See [Mobile](../input/mobile.md) for more information on creating
See [Mobile Input](../input/mobile.md) for more information on creating
setting up cross-platform and dynamic inputs.

## Gamepad
Expand All @@ -43,7 +43,7 @@ Roblox accepts input from USB gamepads such as Xbox and Playstation controllers.
Gamepads require additional steps to detect and verify connected gamepads before
binding controller inputs to actions.

See [Gamepad](../input/gamepad.md) for more information on setting up
See [Gamepad Input](../input/gamepad.md) for more information on setting up
gamepad inputs for your experience.

## Customizing the Camera
Expand Down
8 changes: 4 additions & 4 deletions content/en-us/input/mobile.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Mobile
title: Mobile Input
description: Explains Roblox support for mobile devices.
---

Over half of all Roblox sessions are played on mobile devices so it is important to consider cross-platform accessibility when designing your experience for a wide audience. You should aim to create an ideal cross-platform experience that supports a variety of input devices, including [mouse and keyboard inputs](./mouse-and-keyboard.md) and [gamepad](./gamepad.md).
Over half of all Roblox sessions are played on mobile devices, so it's important to consider cross-platform accessibility when designing an experience for a wide audience. You should aim to support a variety of input devices, including [mouse and keyboard inputs](../input/mouse-and-keyboard.md) and [gamepad](../input/gamepad.md).

When designing a mobile experience, consider the [device orientation](#device-orientation) that you intend user's to use in your experience, then implement your inputs with `Class.ContextActionService` to perform the following mobile-related input tasks:

Expand Down Expand Up @@ -114,7 +114,7 @@ local playerGUI = Players.LocalPlayer:WaitForChild("PlayerGui")
print(playerGUI.CurrentScreenOrientation)
```

## Movement Modes
## Character Movement Modes

Roblox offers several `Class.StarterPlayer` properties you can set to change how users on mobile devices can move through your experience.

Expand Down Expand Up @@ -267,7 +267,7 @@ Use the following sample code to set a button's position with the `Class.Context
ContextActionService:SetPosition("Interact", UDim2.new(1, -70, 0, 10))
```

## Context Dependent Inputs
## Context-Dependent Inputs

When developing for mobile devices you may often want to change what a single button does based on the context. Since screen space on mobile devices limited, use contextual buttons that perform different actions based on what the character is able to do.

Expand Down
Loading

0 comments on commit c4231d7

Please sign in to comment.