mirror of https://github.com/Squidex/squidex.git
Sebastian
6 years ago
9 changed files with 368 additions and 165 deletions
@ -0,0 +1,166 @@ |
|||||
|
<sqx-modal-dialog (close)="emitComplete()" large="true"> |
||||
|
<ng-container title> |
||||
|
Connect |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container content> |
||||
|
<nav aria-label="breadcrumb"> |
||||
|
<ol class="breadcrumb"> |
||||
|
<li class="breadcrumb-item breadcrumb-item-done"> |
||||
|
<i class="icon-checkmark"></i> Setup client |
||||
|
</li> |
||||
|
<li class="breadcrumb-item breadcrumb-item-active" |
||||
|
[class.breadcrumb-item-active]="isStart" |
||||
|
[class.breadcrumb-item-done]="!isStart"> |
||||
|
<i class="icon-checkmark"></i> Choose connection method |
||||
|
</li> |
||||
|
<li class="breadcrumb-item" |
||||
|
[class.breadcrumb-item-active]="!isStart"> |
||||
|
<i class="icon-checkmark"></i> Connect |
||||
|
</li> |
||||
|
</ol> |
||||
|
</nav> |
||||
|
|
||||
|
<ng-container [ngSwitch]="step"> |
||||
|
<ng-container *ngSwitchCase="'Start'"> |
||||
|
<h3>Choose a connection method</h3> |
||||
|
|
||||
|
<sqx-form-hint> |
||||
|
Start with the Postman tutorial in the <a href="https://docs.squidex.io/02-documentation/developer-guides/api-overview/postman" sqxExternalLink>Documentation</a> |
||||
|
</sqx-form-hint> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<div class="option" (click)="go('HTTP')"> |
||||
|
<h5>Connect manually</h5> |
||||
|
|
||||
|
<small class="text-muted">Get instructions how to establish a connection with Postman or curl.</small> |
||||
|
|
||||
|
<i class="icon-angle-right"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="option" (click)="go('CLI')"> |
||||
|
<h5>Connect with Squidex CLI</h5> |
||||
|
|
||||
|
<small class="text-muted">Download the CLI and connect to this app to start backups, sync schemas or export content.</small> |
||||
|
|
||||
|
<i class="icon-angle-right"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="option" (click)="go('SDK')"> |
||||
|
<h5>Connect to your App with SDK</h5> |
||||
|
|
||||
|
<small class="text-muted">Download an SDK and establish a connection to this app.</small> |
||||
|
|
||||
|
<i class="icon-angle-right"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container *ngSwitchCase="'HTTP'"> |
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">a</span> Get a token using curl</h5> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code>{{connectHttpText}}</sqx-code> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">b</span> Just use the following token</h5> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code>{{connectToken?.accessToken}}</sqx-code> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">2</span> Add the token as HTTP header to all requests</h5> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code>Authorization: Bearer [YOUR_TOKEN]</sqx-code> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<sqx-form-hint> |
||||
|
Tokens usally expire after 30days, but you can request multiple tokens. |
||||
|
</sqx-form-hint> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="'CLI'"> |
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">1</span> Get the latest Squidex CLI</h5> |
||||
|
|
||||
|
<p> |
||||
|
<a href="https://github.com/Squidex/squidex-samples/releases" sqxExternalLink>Download the CLI from Github</a> |
||||
|
|
||||
|
<sqx-form-hint> |
||||
|
The releases contains binaries for all major operation system and a small download if you have .NET Core installed. |
||||
|
</sqx-form-hint> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">2</span> Add <samp><your Squidex CLI download directory></samp> to your <samp>$PATH</samp> variable</h5> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">3</span> Add your app name the CLI config</h5> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code> |
||||
|
sq config add {{appName}} {{appName}}:{{client.id}} ${{client.secret}} -u ${{apiUrl.value}} |
||||
|
</sqx-code> |
||||
|
|
||||
|
<sqx-form-hint> |
||||
|
You can manage configuration to multiple apps in the CLI and switch to an app. |
||||
|
</sqx-form-hint> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">4</span> Switch to your app in the CLI</h5> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code> |
||||
|
sq config use {{appName}} |
||||
|
</sqx-code> |
||||
|
</p> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
<ng-container *ngSwitchCase="'SDK'"> |
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">1</span> Install the .NET SDK</h5> |
||||
|
|
||||
|
<p> |
||||
|
The SDK is available on <a href="https://www.nuget.org/packages/Squidex.ClientLibrary/" sqxExternalLink>nuget</a> |
||||
|
</p> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code>dotnet add package Squidex.ClientLibrary</sqx-code> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<h5><span class="badge badge-pill badge-dark">2</span> Create a client manager</h5> |
||||
|
|
||||
|
<p> |
||||
|
<sqx-code>{{connectLibraryText}}</sqx-code> |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="section"> |
||||
|
<sqx-form-hint> |
||||
|
Need more SDK? <a href="https://support.squidex.io" sqxExternalLink>Contact us in the Support Forum</a> |
||||
|
</sqx-form-hint> |
||||
|
</div> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
</ng-container> |
||||
|
|
||||
|
<ng-container footer> |
||||
|
<button class="btn btn-secondary" [disabled]="isStart" (click)="go('Start')"> |
||||
|
Back |
||||
|
</button> |
||||
|
</ng-container> |
||||
|
</sqx-modal-dialog> |
||||
@ -0,0 +1,64 @@ |
|||||
|
@import '_vars'; |
||||
|
@import '_mixins'; |
||||
|
|
||||
|
.breadcrumb { |
||||
|
&-item { |
||||
|
i { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
&-done { |
||||
|
color: $color-theme-green; |
||||
|
|
||||
|
i { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.badge { |
||||
|
@include circle(1.2rem); |
||||
|
margin-right: .25rem; |
||||
|
font-size: 80%; |
||||
|
padding-left: 0; |
||||
|
padding-right: 0; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
|
||||
|
.section { |
||||
|
margin-top: 2rem; |
||||
|
|
||||
|
p { |
||||
|
padding-left: 1.75rem; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.option { |
||||
|
@include border-radius; |
||||
|
cursor: pointer; |
||||
|
background: none; |
||||
|
border: 1px solid $color-border; |
||||
|
padding: 1rem; |
||||
|
position: relative; |
||||
|
margin-top: .5rem; |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: darken($color-border, 10%); |
||||
|
} |
||||
|
|
||||
|
i { |
||||
|
@include absolute(1.6rem, 1rem, auto, auto); |
||||
|
font-size: 1.8rem; |
||||
|
font-weight: 300; |
||||
|
color: $color-border; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.access-token { |
||||
|
height: 10rem; |
||||
|
font-size: 1rem; |
||||
|
font-weight: normal; |
||||
|
font-family: monospace; |
||||
|
resize: none; |
||||
|
} |
||||
@ -0,0 +1,105 @@ |
|||||
|
/* |
||||
|
* Squidex Headless CMS |
||||
|
* |
||||
|
* @license |
||||
|
* Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved. |
||||
|
*/ |
||||
|
|
||||
|
import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; |
||||
|
|
||||
|
import { |
||||
|
AccessTokenDto, |
||||
|
ApiUrlConfig, |
||||
|
AppsState, |
||||
|
ClientDto, |
||||
|
ClientsService, |
||||
|
DialogService, |
||||
|
fadeAnimation, |
||||
|
RoleDto |
||||
|
} from '@app/shared'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'sqx-client-connect-form', |
||||
|
styleUrls: ['./client-connect-form.component.scss'], |
||||
|
templateUrl: './client-connect-form.component.html', |
||||
|
animations: [ |
||||
|
fadeAnimation |
||||
|
] |
||||
|
}) |
||||
|
export class ClientConnectFormComponent implements OnInit { |
||||
|
@Output() |
||||
|
public complete = new EventEmitter(); |
||||
|
|
||||
|
@Input() |
||||
|
public client: ClientDto; |
||||
|
|
||||
|
@Input() |
||||
|
public clientRoles: ReadonlyArray<RoleDto>; |
||||
|
|
||||
|
public appName: string; |
||||
|
|
||||
|
public connectToken: AccessTokenDto; |
||||
|
public connectHttpText: string; |
||||
|
public connectLibraryText: string; |
||||
|
|
||||
|
public step = 'Start'; |
||||
|
|
||||
|
public get isStart() { |
||||
|
return this.step === 'Start'; |
||||
|
} |
||||
|
|
||||
|
constructor( |
||||
|
public readonly appsState: AppsState, |
||||
|
public readonly apiUrl: ApiUrlConfig, |
||||
|
private readonly changeDetector: ChangeDetectorRef, |
||||
|
private readonly clientsService: ClientsService, |
||||
|
private readonly dialogs: DialogService |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public ngOnInit() { |
||||
|
this.appName = this.appsState.appName; |
||||
|
|
||||
|
this.connectHttpText = connectHttpText(this.apiUrl, this.appName, this.client); |
||||
|
this.connectLibraryText = connectLibrary(this.apiUrl, this.appName, this.client); |
||||
|
|
||||
|
this.clientsService.createToken(this.appsState.appName, this.client) |
||||
|
.subscribe(dto => { |
||||
|
this.connectToken = dto; |
||||
|
|
||||
|
this.changeDetector.detectChanges(); |
||||
|
}, error => { |
||||
|
this.dialogs.notifyError(error); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public go(step: string) { |
||||
|
this.step = step; |
||||
|
} |
||||
|
|
||||
|
public emitComplete() { |
||||
|
this.complete.emit(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function connectHttpText(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { |
||||
|
const url = apiUrl.buildUrl('identity-server/connect/token'); |
||||
|
|
||||
|
return `$ curl
|
||||
|
-X POST '${url}' |
||||
|
-H 'Content-Type: application/x-www-form-urlencoded' |
||||
|
-d 'grant_type=client_credentials& |
||||
|
client_id=${app}:${client.id}& |
||||
|
client_secret=${client.secret}& |
||||
|
scope=squidex-api`;
|
||||
|
} |
||||
|
|
||||
|
function connectLibrary(apiUrl: ApiUrlConfig, app: string, client: { id: string, secret: string }) { |
||||
|
const url = apiUrl.value; |
||||
|
|
||||
|
return `var clientManager = new SquidexClientManager(
|
||||
|
"${url}", |
||||
|
"${app}", |
||||
|
"${app}:${client.id}", |
||||
|
"${client.secret}")`;
|
||||
|
} |
||||
Loading…
Reference in new issue