18 | `
19 | })
20 | export class LoginComponent {
21 | constructor(private authService: AuthService) {}
22 |
23 | login() {
24 | this.authService.login();
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 |
8 | Microsoft Graph Demo
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // Protractor configuration file, see link for more information
2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
3 |
4 | const { SpecReporter } = require('jasmine-spec-reporter');
5 |
6 | exports.config = {
7 | allScriptsTimeout: 11000,
8 | specs: [
9 | './e2e/**/*.e2e-spec.ts'
10 | ],
11 | capabilities: {
12 | 'browserName': 'chrome'
13 | },
14 | directConnect: true,
15 | baseUrl: 'http://localhost:4200/',
16 | framework: 'jasmine',
17 | jasmineNodeOpts: {
18 | showColors: true,
19 | defaultTimeoutInterval: 30000,
20 | print: function() {}
21 | },
22 | onPrepare() {
23 | require('ts-node').register({
24 | project: 'e2e/tsconfig.e2e.json'
25 | });
26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/0.13/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular/cli'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage-istanbul-reporter'),
13 | require('@angular/cli/plugins/karma')
14 | ],
15 | client:{
16 | clearContext: false // leave Jasmine Spec Runner output visible in browser
17 | },
18 | coverageIstanbulReporter: {
19 | reports: [ 'html', 'lcovonly' ],
20 | fixWebpackSourcePaths: true
21 | },
22 | angularCli: {
23 | environment: 'dev'
24 | },
25 | reporters: ['progress', 'kjhtml'],
26 | port: 9876,
27 | colors: true,
28 | logLevel: config.LOG_INFO,
29 | autoWatch: true,
30 | browsers: ['Chrome'],
31 | singleRun: false
32 | });
33 | };
34 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/long-stack-trace-zone';
4 | import 'zone.js/dist/proxy.js';
5 | import 'zone.js/dist/sync-test';
6 | import 'zone.js/dist/jasmine-patch';
7 | import 'zone.js/dist/async-test';
8 | import 'zone.js/dist/fake-async-test';
9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 | BrowserDynamicTestingModule,
12 | platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 |
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 |
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 |
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 | BrowserDynamicTestingModule,
25 | platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) Microsoft Corporation. All rights reserved.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE
22 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the source repository root for complete license information.
4 | */
5 |
6 | import { BrowserModule } from '@angular/platform-browser';
7 | import { NgModule } from '@angular/core';
8 | import { RouterModule, Routes } from '@angular/router';
9 | import { HttpModule } from '@angular/http';
10 |
11 | import { AppComponent } from './app.component';
12 | import { HomeComponent } from './home/home.component';
13 | import { LoginComponent } from './login/login.component';
14 |
15 | import { HttpService } from './shared/http.service';
16 | import { AuthService } from './auth/auth.service';
17 | import { HomeService } from './home/home.service';
18 |
19 | const routes: Routes = [
20 | { path: '', component: LoginComponent },
21 | { path: 'home', component: HomeComponent }
22 | ];
23 |
24 | @NgModule({
25 | declarations: [
26 | AppComponent,
27 | HomeComponent,
28 | LoginComponent
29 | ],
30 | imports: [
31 | BrowserModule,
32 | HttpModule,
33 | RouterModule.forRoot(routes)
34 | ],
35 | providers: [
36 | HttpService,
37 | AuthService,
38 | HomeService
39 | ],
40 | bootstrap: [
41 | AppComponent
42 | ]
43 | })
44 | export class AppModule { }
45 |
--------------------------------------------------------------------------------
/.angular-cli.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "project": {
4 | "name": "demo-simple"
5 | },
6 | "apps": [
7 | {
8 | "root": "src",
9 | "outDir": "dist",
10 | "assets": [
11 | "assets",
12 | "favicon.ico"
13 | ],
14 | "index": "index.html",
15 | "main": "main.ts",
16 | "polyfills": "polyfills.ts",
17 | "test": "test.ts",
18 | "tsconfig": "tsconfig.app.json",
19 | "testTsconfig": "tsconfig.spec.json",
20 | "prefix": "app",
21 | "styles": [
22 | "styles.css"
23 | ],
24 | "scripts": [],
25 | "environmentSource": "environments/environment.ts",
26 | "environments": {
27 | "dev": "environments/environment.ts",
28 | "prod": "environments/environment.prod.ts"
29 | }
30 | }
31 | ],
32 | "e2e": {
33 | "protractor": {
34 | "config": "./protractor.conf.js"
35 | }
36 | },
37 | "lint": [
38 | {
39 | "project": "src/tsconfig.app.json",
40 | "exclude": "**/node_modules/**"
41 | },
42 | {
43 | "project": "src/tsconfig.spec.json",
44 | "exclude": "**/node_modules/**"
45 | },
46 | {
47 | "project": "e2e/tsconfig.e2e.json",
48 | "exclude": "**/node_modules/**"
49 | }
50 | ],
51 | "test": {
52 | "karma": {
53 | "config": "./karma.conf.js"
54 | }
55 | },
56 | "defaults": {
57 | "styleExt": "css",
58 | "component": {}
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "demo-simple",
3 | "version": "0.0.0",
4 | "license": "MIT",
5 | "scripts": {
6 | "ng": "ng",
7 | "start": "ng serve",
8 | "build": "ng build",
9 | "test": "ng test",
10 | "lint": "ng lint",
11 | "e2e": "ng e2e"
12 | },
13 | "private": true,
14 | "dependencies": {
15 | "@angular/animations": "4.3.3",
16 | "@angular/common": "4.3.3",
17 | "@angular/compiler": "4.3.3",
18 | "@angular/core": "4.3.3",
19 | "@angular/forms": "4.3.3",
20 | "@angular/http": "4.3.3",
21 | "@angular/platform-browser": "4.3.3",
22 | "@angular/platform-browser-dynamic": "4.3.3",
23 | "@angular/router": "4.3.3",
24 | "@types/hellojs": "0.2.31",
25 | "core-js": "2.5.0",
26 | "@microsoft/microsoft-graph-client": "https://github.com/microsoftgraph/msgraph-sdk-javascript.git",
27 | "@microsoft/microsoft-graph-types": "https://github.com/microsoftgraph/msgraph-typescript-typings.git",
28 | "hellojs": "1.15.1",
29 | "rxjs": "5.4.2",
30 | "zone.js": "0.8.16"
31 | },
32 | "devDependencies": {
33 | "@angular/cli": "1.2.7",
34 | "@angular/compiler-cli": "4.3.3",
35 | "@angular/language-service": "4.3.3",
36 | "@types/jasmine": "2.5.53",
37 | "@types/jasminewd2": "2.0.2",
38 | "@types/node": "8.0.19",
39 | "codelyzer": "3.1.2",
40 | "jasmine-core": "2.7.0",
41 | "jasmine-spec-reporter": "4.1.1",
42 | "karma": "1.7.0",
43 | "karma-chrome-launcher": "2.2.0",
44 | "karma-cli": "1.0.1",
45 | "karma-coverage-istanbul-reporter": "1.3.0",
46 | "karma-jasmine": "1.1.0",
47 | "karma-jasmine-html-reporter": "0.2.2",
48 | "protractor": "5.1.2",
49 | "ts-node": "3.3.0",
50 | "tslint": "5.5.0",
51 | "typescript": "2.4.2"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/app/auth/auth.service.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the source repository root for complete license information.
4 | */
5 |
6 | // This sample uses an open source OAuth 2.0 library that is compatible with the Azure AD v2.0 endpoint.
7 | // Microsoft does not provide fixes or direct support for this library.
8 | // Refer to the library’s repository to file issues or for other support.
9 | // For more information about auth libraries see: https://azure.microsoft.com/documentation/articles/active-directory-v2-libraries/
10 | // Library repo: https://github.com/MrSwitch/hello.js
11 |
12 | import { Injectable, NgZone } from '@angular/core';
13 | import { Router } from '@angular/router';
14 | import * as hello from 'hellojs/dist/hello.all.js';
15 |
16 | import { Configs } from '../shared/configs';
17 |
18 | @Injectable()
19 | export class AuthService {
20 | constructor(
21 | private zone: NgZone,
22 | private router: Router
23 | ) { }
24 |
25 | initAuth() {
26 | hello.init({
27 | msft: {
28 | id: Configs.appId,
29 | oauth: {
30 | version: 2,
31 | auth: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize'
32 | },
33 | scope_delim: ' ',
34 | form: false
35 | },
36 | },
37 | { redirect_uri: window.location.href }
38 | );
39 | }
40 |
41 | login() {
42 | hello('msft').login({ scope: Configs.scope }).then(
43 | () => {
44 | this.zone.run(() => {
45 | this.router.navigate(['/home']);
46 | });
47 | },
48 | e => console.error(e.error.message)
49 | );
50 | }
51 |
52 | logout() {
53 | hello('msft').logout().then(
54 | () => this.router.navigate(['/']),
55 | e => console.error(e.error.message)
56 | );
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/app/home/home.service.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the source repository root for complete license information.
4 | */
5 |
6 | import 'rxjs/add/operator/catch';
7 | import 'rxjs/add/operator/map';
8 | import 'rxjs/add/observable/fromPromise';
9 | import * as MicrosoftGraph from "@microsoft/microsoft-graph-types"
10 | import * as MicrosoftGraphClient from "@microsoft/microsoft-graph-client"
11 | import { Injectable } from '@angular/core';
12 | import { Http } from '@angular/http';
13 | import { Observable } from 'rxjs/Observable';
14 |
15 | import { HttpService } from '../shared/http.service';
16 |
17 | @Injectable()
18 | export class HomeService {
19 | url = 'https://graph.microsoft.com/v1.0';
20 | file = 'demo.xlsx';
21 | table = 'Table1';
22 |
23 | constructor(
24 | private http: Http,
25 | private httpService: HttpService) {
26 | }
27 |
28 | getClient(): MicrosoftGraphClient.Client
29 | {
30 | var client = MicrosoftGraphClient.Client.init({
31 | authProvider: (done) => {
32 | done(null, this.httpService.getAccessToken()); //first parameter takes an error if you can't get an access token
33 | }
34 | });
35 | return client;
36 | }
37 |
38 | getMe(): Observable
39 | {
40 | var client = this.getClient();
41 | return Observable.fromPromise(client
42 | .api('me')
43 | .select("displayName, mail, userPrincipalName")
44 | .get()
45 | .then ((res => {
46 | return res;
47 | } ) )
48 | );
49 | }
50 |
51 |
52 | addInfoToExcel(user: MicrosoftGraph.User) {
53 | const userInfo = [];
54 | const userEmail = user.mail || user.userPrincipalName;
55 |
56 |
57 | userInfo.push([user.displayName, userEmail]);
58 |
59 |
60 | const userInfoRequestBody = {
61 | index: null,
62 | values: userInfo
63 | };
64 |
65 |
66 | const body = JSON.stringify(userInfoRequestBody);
67 |
68 | var client = this.getClient();
69 | var url = `${this.url}/me/drive/root:/${this.file}:/workbook/tables/${this.table}/rows/add`
70 | return Observable.fromPromise(client
71 | .api(url)
72 | .post(body)
73 | );
74 | }
75 |
76 | }
77 |
--------------------------------------------------------------------------------
/src/app/home/home.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
3 | * See LICENSE in the source repository root for complete license information.
4 | */
5 |
6 | import { Component, OnInit, OnDestroy } from '@angular/core';
7 | import { Subscription } from 'rxjs/Subscription';
8 |
9 | import * as MicrosoftGraph from "@microsoft/microsoft-graph-types"
10 | import { HomeService } from './home.service';
11 | import { AuthService } from '../auth/auth.service';
12 |
13 | @Component({
14 | selector: 'app-home',
15 | template: `
16 |
17 |
18 |
19 |
User Name
20 |
User Email
21 |
22 |
23 |
{{user.displayName}}
24 |
{{user.mail || user.userPrincipalName}}
25 |
26 |
27 |
28 |
31 |
34 |
35 |
Successfully updated demo.xslx
36 |
37 | `
38 | })
39 | export class HomeComponent implements OnInit, OnDestroy {
40 | user: MicrosoftGraph.User;
41 | subsGetMe: Subscription;
42 | subsAddInfoToExcel: Subscription;
43 | excelRequestSucceeded: Boolean;
44 |
45 | constructor(
46 | private homeService: HomeService,
47 | private authService: AuthService
48 | ) { }
49 |
50 | ngOnInit() {
51 | this.subsGetMe = this.homeService.getMe().subscribe(user => this.user = user);
52 | }
53 |
54 | ngOnDestroy() {
55 | this.subsGetMe.unsubscribe();
56 | this.subsAddInfoToExcel.unsubscribe();
57 | }
58 |
59 | onAddEventToExcel() {
60 | this.subsAddInfoToExcel = this.homeService.addInfoToExcel(this.user).subscribe();
61 | if (this.user.directReports != null )
62 | {
63 | this.excelRequestSucceeded = true;
64 | }
65 | }
66 |
67 | onLogout() {
68 | this.authService.logout();
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 |
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
39 |
40 | /** Evergreen browsers require these. **/
41 | import 'core-js/es6/reflect';
42 | import 'core-js/es7/reflect';
43 |
44 |
45 | /**
46 | * Required to support Web Animations `@angular/animation`.
47 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
48 | **/
49 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
50 |
51 |
52 |
53 | /***************************************************************************************************
54 | * Zone JS is required by Angular itself.
55 | */
56 | import 'zone.js/dist/zone'; // Included with Angular CLI.
57 |
58 |
59 |
60 | /***************************************************************************************************
61 | * APPLICATION IMPORTS
62 | */
63 |
64 | /**
65 | * Date, currency, decimal and percent pipes.
66 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
67 | */
68 | // import 'intl'; // Run `npm install --save intl`.
69 | /**
70 | * Need to import at least one locale-data with intl.
71 | */
72 | // import 'intl/locale-data/jsonp/en';
73 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "eofline": true,
15 | "forin": true,
16 | "import-blacklist": [
17 | true,
18 | "rxjs"
19 | ],
20 | "import-spacing": true,
21 | "indent": [
22 | true,
23 | "spaces"
24 | ],
25 | "interface-over-type-literal": true,
26 | "label-position": true,
27 | "max-line-length": [
28 | true,
29 | 140
30 | ],
31 | "member-access": false,
32 | "member-ordering": [
33 | true,
34 | {
35 | "order": [
36 | "static-field",
37 | "instance-field",
38 | "static-method",
39 | "instance-method"
40 | ]
41 | }
42 | ],
43 | "no-arg": true,
44 | "no-bitwise": true,
45 | "no-console": [
46 | true,
47 | "debug",
48 | "info",
49 | "time",
50 | "timeEnd",
51 | "trace"
52 | ],
53 | "no-construct": true,
54 | "no-debugger": true,
55 | "no-duplicate-super": true,
56 | "no-empty": false,
57 | "no-empty-interface": true,
58 | "no-eval": true,
59 | "no-inferrable-types": [
60 | true,
61 | "ignore-params"
62 | ],
63 | "no-misused-new": true,
64 | "no-non-null-assertion": true,
65 | "no-shadowed-variable": true,
66 | "no-string-literal": false,
67 | "no-string-throw": true,
68 | "no-switch-case-fall-through": true,
69 | "no-trailing-whitespace": true,
70 | "no-unnecessary-initializer": true,
71 | "no-unused-expression": true,
72 | "no-use-before-declare": true,
73 | "no-var-keyword": true,
74 | "object-literal-sort-keys": false,
75 | "one-line": [
76 | true,
77 | "check-open-brace",
78 | "check-catch",
79 | "check-else",
80 | "check-whitespace"
81 | ],
82 | "prefer-const": true,
83 | "quotemark": [
84 | true,
85 | "single"
86 | ],
87 | "radix": true,
88 | "semicolon": [
89 | true,
90 | "always"
91 | ],
92 | "triple-equals": [
93 | true,
94 | "allow-null-check"
95 | ],
96 | "typedef-whitespace": [
97 | true,
98 | {
99 | "call-signature": "nospace",
100 | "index-signature": "nospace",
101 | "parameter": "nospace",
102 | "property-declaration": "nospace",
103 | "variable-declaration": "nospace"
104 | }
105 | ],
106 | "typeof-compare": true,
107 | "unified-signatures": true,
108 | "variable-name": false,
109 | "whitespace": [
110 | true,
111 | "check-branch",
112 | "check-decl",
113 | "check-operator",
114 | "check-separator",
115 | "check-type"
116 | ],
117 | "directive-selector": [
118 | true,
119 | "attribute",
120 | "app",
121 | "camelCase"
122 | ],
123 | "component-selector": [
124 | true,
125 | "element",
126 | "app",
127 | "kebab-case"
128 | ],
129 | "use-input-property-decorator": true,
130 | "use-output-property-decorator": true,
131 | "use-host-property-decorator": true,
132 | "no-input-rename": true,
133 | "no-output-rename": true,
134 | "use-life-cycle-interface": true,
135 | "use-pipe-transform-interface": true,
136 | "component-class-suffix": true,
137 | "directive-class-suffix": true,
138 | "no-access-missing-member": true,
139 | "templates-use-public": true,
140 | "invoke-injectable": true
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/README-localized/README-zh-cn.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-excel
5 | - office-onedrive
6 | languages:
7 | - typescript
8 | description: "此示例演示如何使用 Microsoft Graph API 将 Angular 4.0 应用连接到 Microsoft 工作或学校帐户。"
9 | extensions:
10 | contentType: samples
11 | technologies:
12 | - Mcirosoft Graph
13 | - Microsoft identity platform
14 | platforms:
15 | - AngularJS
16 | createdDate: 8/28/2017 3:55:43 PM
17 | ---
18 | # 针对 Angular 4 的 Microsoft Graph Excel Starter 示例
19 |
20 | ## 目录
21 |
22 | * [简介](#introduction)
23 | * [先决条件](#prerequisites)
24 | * [注册应用程序](#register-the-application)
25 | * [生成并运行示例](#build-and-run-the-sample)
26 | * [问题和意见](#questions-and-comments)
27 | * [参与](#contributing)
28 | * [其他资源](#additional-resources)
29 |
30 | ## 简介
31 |
32 | 借助 [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript),此示例演示如何使用 [Microsoft Graph API](https://developer.microsoft.com/en-us/graph/) 将 Angular 4.0 应用连接到 Microsoft 工作或学校 (Azure Active Directory) 以获取有关登录用户的信息,并将该信息上传到存储在 OneDrive 中的 Excel 文件。
33 |
34 | 
35 |
36 | 对应用程序进行验证和授权后,它将获得登录用户的用户名和电子邮件地址。
37 |
38 | 
39 |
40 | 单击“**写入 Excel**”按钮时,应用程序会将用户信息写入存储在用户根 OneDrive 文件夹中的 Excel 文件。
41 |
42 | 
43 |
44 | ## 先决条件
45 |
46 | 若要使用此示例,需要以下内容:
47 | * [Node.js](https://nodejs.org/)。需要提供节点才能在开发服务器上运行示例和安装依赖项。
48 | * [Angular CLI](https://github.com/angular/angular-cli)
49 | * [Microsoft 帐户](https://www.outlook.com) 或 [Office 365 商业版帐户](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
50 | * 将此存储库根目录中的 **demo.xlsx** 文件上传到你 OneDrive 帐户的根文件夹。此文件包含一个包含两列的空表格。
51 |
52 | ## 注册应用程序
53 |
54 | 1. 使用你的个人帐户或工作或学校帐户登录 [Azure 门户 - 应用注册](https://go.microsoft.com/fwlink/?linkid=2083908)。
55 |
56 | 2. 选择“**新注册**”。
57 |
58 | 3. 在“**名称**”部分输入一个会显示给应用用户的有意义的应用程序名称
59 |
60 | 1. 在“**支持的帐户类型**”部分,选择“**任何组织目录中的帐户和个人 Microsoft 帐户(例如 Skype、Xbox、Outlook.com)**”
61 |
62 | 1. 选择“**注册**”以创建应用程序。
63 |
64 | 应用程序的“概述”页面显示了应用程序的属性。
65 |
66 | 4. 复制**应用程序(客户端)ID**。这是应用的唯一标识符。
67 |
68 | 5. 在应用的页面列表中,选择“**身份验证**”。
69 |
70 | 6. 在“**重定向 URI**”部分中,从“**类型**”下拉列表中选择“**Web**”,然后输入 *http://localhost:4200/* 作为“**重定向 URI**”。
71 |
72 | 1. 在“**高级设置**”下,通过选中“**访问令牌**”和“**ID 令牌**”框来启用隐式授权流
73 |
74 | 8. 选择“**保存**”。
75 |
76 | ## 生成并运行示例
77 |
78 | 1. 使用你最喜爱的 IDE,打开 *src/app/shared* 中的 **configs.ts**。
79 |
80 | 2. 将 **ENTER_YOUR_CLIENT_ID** 占位符值替换为所注册的 Azure 应用程序的应用程序 ID。
81 |
82 | 3. 在命令提示窗口的根目录中运行以下命令:`npm install`。这将安装项目依赖项,包括 [HelloJS](http://adodson.com/hello.js/) 客户端身份验证库和 [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript)。
83 |
84 | 4. 运行 `npm start` 来启动开发服务器。
85 |
86 | 5. 在 Web 浏览器中导航到 [http://localhost:4200/](http://localhost:4200/)。
87 |
88 | 6. 选择“**使用 Microsoft 帐户登录**”按钮。
89 |
90 | 7. 使用个人帐户或者工作或学校帐户登录,并授予所请求的权限。
91 |
92 | 8. 单击“**写入 Excel**”按钮。验证是否已将相应行添加到你上传到根 OneDrive 文件夹的 **demo.xslx** 文件。
93 |
94 |
95 | ## 参与
96 |
97 | 如果想要参与本示例,请参阅 [CONTRIBUTING.MD](/CONTRIBUTING.md)。
98 |
99 | 此项目已采用 [Microsoft 开放源代码行为准则](https://opensource.microsoft.com/codeofconduct/)。有关详细信息,请参阅[行为准则 FAQ](https://opensource.microsoft.com/codeofconduct/faq/)。如有其他任何问题或意见,也可联系 [opencode@microsoft.com](mailto:opencode@microsoft.com)。
100 |
101 | ## 问题和意见
102 |
103 | 我们乐意倾听你对此示例的反馈。你可以在该存储库中的[问题](https://github.com/microsoftgraph/angular-excelstarter-sample/issues)部分将问题和建议发送给我们。
104 |
105 | 与 Microsoft Graph 开发相关的一般问题应发布到 [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph)。请确保你的问题或意见标记有 [microsoftgraph]。
106 |
107 | ## 其他资源
108 |
109 | - [其他 Microsoft Graph 连接示例](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
110 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
111 |
112 | ## 版权信息
113 | 版权所有 (c) 2017 Microsoft。保留所有权利。
114 |
--------------------------------------------------------------------------------
/README-localized/README-ja-jp.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-excel
5 | - office-onedrive
6 | languages:
7 | - typescript
8 | description: "このサンプルでは、Microsoft Graph API を使用して Angular 4.0 アプリを職場または学校の Microsoft アカウントに接続する方法を示します。"
9 | extensions:
10 | contentType: samples
11 | technologies:
12 | - Mcirosoft Graph
13 | - Microsoft identity platform
14 | platforms:
15 | - AngularJS
16 | createdDate: 8/28/2017 3:55:43 PM
17 | ---
18 | # Angular 4 用 Microsoft Graph Excel Starter のサンプル
19 |
20 | ## 目次
21 |
22 | * [はじめに](#introduction)
23 | * [前提条件](#prerequisites)
24 | * [アプリケーションの登録](#register-the-application)
25 | * [サンプルのビルドと実行](#build-and-run-the-sample)
26 | * [質問とコメント](#questions-and-comments)
27 | * [投稿](#contributing)
28 | * [その他のリソース](#additional-resources)
29 |
30 | ## 概要
31 |
32 | このサンプルは、サインインしているユーザーに関する情報を取得し、その情報を OneDrive に格納されている Excel ファイルにアップロードするために、[Microsoft Graph API](https://developer.microsoft.com/en-us/graph/) と [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) を使用して Microsoft の職場または学校 (Azure Active Directory) アカウントに Angular 4.0 アプリを接続する方法を示しています。
33 |
34 | 
35 |
36 | アプリケーションを認証および承認すると、サインインしているユーザーの名前とメール アドレスを取得します。
37 |
38 | 
39 |
40 | [**Excel に書き込む**] ボタンをクリックすると、アプリケーションはユーザー情報をユーザーのルート OneDrive フォルダーに格納されている Excel ファイルに書き込みます。
41 |
42 | 
43 |
44 | ## 前提条件
45 |
46 | このサンプルを使用するには、次のものが必要です:
47 | * [Node.js](https://nodejs.org/)。Node は、開発サーバーでサンプルを実行して、依存関係をインストールするために必要です。
48 | * [Angular CLI](https://github.com/angular/angular-cli)
49 | * [Microsoft アカウント](https://www.outlook.com)または [Office 365 for business アカウント](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
50 | * このリポジトリのルートにある **demo.xlsx** ファイルを OneDrive アカウントのルート フォルダーにアップロードします。このファイルには空のテーブルが含まれており、テーブルには列が 2 つあります。
51 |
52 | ## アプリケーションの登録
53 |
54 | 1. 個人用アカウントか職場または学校アカウントのいずれかを使用して、[Azure Portal の [アプリ登録]](https://go.microsoft.com/fwlink/?linkid=2083908) にサインインします。
55 |
56 | 2. [**新規登録**] を選択します。
57 |
58 | 3. [**名前**] セクションに、アプリのユーザーに表示されるわかりやすいアプリケーション名を入力します。
59 |
60 | 1. [**サポートされているアカウントの種類**] セクションで、[**組織ディレクトリ内のアカウントと個人の Microsoft アカウント (例: Skype、Xbox、Outlook.com)**] を選択します。
61 |
62 | 1. [**登録**] を選択して、アプリケーションを作成します。
63 |
64 | アプリケーションの概要ページには、アプリのプロパティが表示されます。
65 |
66 | 4. **アプリケーション (クライアント) ID** をコピーします。これは、アプリの一意識別子です。
67 |
68 | 5. アプリのページの一覧から [**認証**] を選択します。
69 |
70 | 6. [**リダイレクト URI**] セクションで、[**種類**] ドロップダウンから [**Web**] を選択し、**リダイレクト URI** として *http://localhost:4200/* を入力します。
71 |
72 | 1. [**詳細設定**] で、[**アクセス トークン**] および [**ID トークン**] チェック ボックスをオンにして、暗黙的な許可のフローを有効にします
73 |
74 | 8. [**保存**] を選択します。
75 |
76 | ## サンプルのビルドと実行
77 |
78 | 1. お気に入りの IDE を使用して、*src/app/shared* の **configs.ts** を開きます。
79 |
80 | 2. **ENTER_YOUR_CLIENT_ID** プレースホルダー値を登録済みの Azure アプリケーションのアプリケーション ID に置き換えます。
81 |
82 | 3. コマンド プロンプトで、ルート ディレクトリで次のコマンドを実行します: `npm install`。これにより、[HelloJS](http://adodson.com/hello.js/) クライアント側認証ライブラリおよび [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) を含むプロジェクトの依存関係がインストールされます。
83 |
84 | 4. `npm start` を実行して、開発サーバーを起動します。
85 |
86 | 5. Web ブラウザーで [http://localhost:4200/](http://localhost:4200/) に移動します。
87 |
88 | 6. [**Microsoft アカウントを使用してサインインする**] ボタンを選択します。
89 |
90 | 7. 個人用あるいは職場または学校アカウントでサインインし、要求されたアクセス許可を付与します。
91 |
92 | 8. [**Excel に書き込む**] ボタンをクリックします。ルート OneDrive フォルダーにアップロードした **demo.xlsx** ファイルに行が追加されていることを確認します。
93 |
94 |
95 | ## 投稿
96 |
97 | このサンプルに投稿する場合は、[CONTRIBUTING.MD](/CONTRIBUTING.md) を参照してください。
98 |
99 | このプロジェクトでは、[Microsoft Open Source Code of Conduct (Microsoft オープン ソース倫理規定)](https://opensource.microsoft.com/codeofconduct/) が採用されています。詳細については、「[Code of Conduct の FAQ (倫理規定の FAQ)](https://opensource.microsoft.com/codeofconduct/faq/)」を参照してください。また、その他の質問やコメントがあれば、[opencode@microsoft.com](mailto:opencode@microsoft.com) までお問い合わせください。
100 |
101 | ## 質問とコメント
102 |
103 | このサンプルに関するフィードバックをお寄せください。質問や提案は、このリポジトリの「[問題](https://github.com/microsoftgraph/angular-excelstarter-sample/issues)」セクションで送信できます。
104 |
105 | Microsoft Graph 開発全般の質問につきましては、「[Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph)」に投稿してください。質問やコメントには、必ず "microsoftgraph" とタグを付けてください。
106 |
107 | ## その他のリソース
108 |
109 | - [その他の Microsoft Graph Connect サンプル](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
110 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
111 |
112 | ## 著作権
113 | Copyright (c) 2017 Microsoft.All rights reserved.
114 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Microsoft Graph Excel Starter Sample for Angular 4
2 |
3 | ## IMPORTANT
4 |
5 | **This project is being archived and replaced with the [Build Angular single-page apps with the Microsoft Graph SDK training](https://github.com/microsoftgraph/msgraph-training-angularspa). As part of the archival process, we're closing all open issues and pull requests.**
6 |
7 | **You can continue to use this sample "as-is", but it won't be maintained moving forward. We apologize for any inconvenience.**
8 |
9 | ## Table of contents
10 |
11 | * [Introduction](#introduction)
12 | * [Prerequisites](#prerequisites)
13 | * [Register the application](#register-the-application)
14 | * [Build and run the sample](#build-and-run-the-sample)
15 | * [Questions and comments](#questions-and-comments)
16 | * [Contributing](#contributing)
17 | * [Additional resources](#additional-resources)
18 |
19 | ## Introduction
20 |
21 | This sample shows how to connect an Angular 4.0 app to a Microsoft work or school (Azure Active Directory) using the [Microsoft Graph API](https://developer.microsoft.com/en-us/graph/) with the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript) to get information about the signed-in user and upload that information to an Excel file stored in OneDrive.
22 |
23 | 
24 |
25 | Once you authenticate and authorize the application, it gets the signed-in user's name and email address.
26 |
27 | 
28 |
29 | When you click the **Write to Excel** button, the application writes the user information to an Excel file stored in the user's root OneDrive folder.
30 |
31 | 
32 |
33 | ## Prerequisites
34 |
35 | To use this sample, you need the following:
36 | * [Node.js](https://nodejs.org/). Node is required to run the sample on a development server and to install dependencies.
37 | * [Angular CLI](https://github.com/angular/angular-cli)
38 | * Either a [Microsoft account](https://www.outlook.com) or [Office 365 for business account](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
39 | * Upload the **demo.xlsx** file in the root of this repository to the root folder of your OneDrive account. This file contains an empty table with two columns.
40 |
41 | ## Register the application
42 |
43 | 1. Sign into [Azure Portal - App Registrations](https://go.microsoft.com/fwlink/?linkid=2083908) using either your personal or work or school account.
44 |
45 | 2. Choose **New registration**.
46 |
47 | 3. In the **Name** section, enter a meaningful application name that will be displayed to users of the app
48 |
49 | 1. In the **Supported account types** section, select **Accounts in any organizational directory and personal Microsoft accounts (e.g. Skype, Xbox, Outlook.com)**
50 |
51 | 1. Select **Register** to create the application.
52 |
53 | The application's Overview page shows the properties of your app.
54 |
55 | 4. Copy the **Application (client) Id**. This is the unique identifier for your app.
56 |
57 | 5. In the list of pages for the app, select **Authentication**.
58 |
59 | 6. In the **Redirect URIs** section, choose **Web** from the **Type** dropdown and enter *http://localhost:4200/* as the **Redirect URI**.
60 |
61 | 1. Under **Advanced Settings** enable the implicit grant flow by checking the **Access tokens** and **ID tokens** boxes
62 |
63 | 8. Choose **Save**.
64 |
65 | ## Build and run the sample
66 |
67 | 1. Using your favorite IDE, open **configs.ts** in *src/app/shared*.
68 |
69 | 2. Replace the **ENTER_YOUR_CLIENT_ID** placeholder value with the application ID of your registered Azure application.
70 |
71 | 3. In a command prompt, run the following command in the root directory: `npm install`. This installs project dependencies, including the [HelloJS](http://adodson.com/hello.js/) client-side authentication library and the [Microsoft Graph JavaScript SDK](https://github.com/microsoftgraph/msgraph-sdk-javascript).
72 |
73 | 4. Run `npm start` to start the development server.
74 |
75 | 5. Navigate to [http://localhost:4200/](http://localhost:4200/) in your web browser.
76 |
77 | 6. Choose the **Sign in with your Microsoft account** button.
78 |
79 | 7. Sign in with your personal or work or school account and grant the requested permissions.
80 |
81 | 8. Click the **Write to Excel** button. Verify that the rows have been added to the **demo.xslx** file that you uploaded to your root OneDrive folder.
82 |
83 |
84 | ## Contributing
85 |
86 | If you'd like to contribute to this sample, see [CONTRIBUTING.MD](/CONTRIBUTING.md).
87 |
88 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
89 |
90 | ## Questions and comments
91 |
92 | We'd love to get your feedback about this sample. You can send your questions and suggestions in the [Issues](https://github.com/microsoftgraph/angular-excelstarter-sample/issues) section of this repository.
93 |
94 | Questions about Microsoft Graph development in general should be posted to [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Make sure that your questions or comments are tagged with [microsoftgraph].
95 |
96 | ## Additional resources
97 |
98 | - [Other Microsoft Graph Connect samples](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
99 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
100 |
101 | ## Copyright
102 | Copyright (c) 2017 Microsoft. All rights reserved.
103 |
--------------------------------------------------------------------------------
/README-localized/README-pt-br.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-excel
5 | - office-onedrive
6 | languages:
7 | - typescript
8 | description: "Este exemplo mostra como conectar um aplicativo angular 4.0 a uma conta corporativa ou de estudante Microsoft usando a API do Microsoft Graph."
9 | extensions:
10 | contentType: samples
11 | technologies:
12 | - Mcirosoft Graph
13 | - Microsoft identity platform
14 | platforms:
15 | - AngularJS
16 | createdDate: 8/28/2017 3:55:43 PM
17 | ---
18 | # Exemplo do Excel Starter no Microsoft Graph para angular 4
19 |
20 | ## Sumário
21 |
22 | * [Introdução](#introduction)
23 | * [Pré-requisitos](#prerequisites)
24 | * [Registrar o aplicativo](#register-the-application)
25 | * [Criar e executar o exemplo](#build-and-run-the-sample)
26 | * [Perguntas e comentários](#questions-and-comments)
27 | * [Colaboração](#contributing)
28 | * [Recursos adicionais](#additional-resources)
29 |
30 | ## Introdução
31 |
32 | Este exemplo mostra como conectar um aplicativo angular 4.0 a uma conta corporativa ou de estudante da Microsoft (Azure Active Directory) usando a [API do Microsoft Graph](https://developer.microsoft.com/en-us/graph/) com o [SDK de JavaScript do Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) para informações sobre o usuário conectado e carregar estas informações em um arquivo do Excel armazenado no OneDrive.
33 |
34 | 
35 |
36 | Depois que você autenticar e autorizar o aplicativo, ele receberá o nome e o endereço de email do usuário que está conectado.
37 |
38 | 
39 |
40 | Quando você clica no botão **Gravar no Excel**, o aplicativo grava as informações do usuário em um arquivo do Excel armazenado na pasta raiz do OneDrive do usuário.
41 |
42 | 
43 |
44 | ## Pré-requisitos
45 |
46 | Para usar este exemplo, você precisa do seguinte:
47 | * [Node.js](https://nodejs.org/). É necessário ter um nó para executar o exemplo em um servidor de desenvolvimento e instalar as dependências.
48 | * [CLI angular](https://github.com/angular/angular-cli)
49 | * Uma [conta da Microsoft](https://www.outlook.com) ou [conta do Office 365 para empresas](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
50 | * Carregue o arquivo **demonstração.xlsx** na raiz deste repositório para a pasta raiz da sua conta do OneDrive. Este arquivo contém uma tabela vazia com duas colunas.
51 |
52 | ## Registrar o aplicativo
53 |
54 | 1. Entre no [Portal do Azure – Registros do Aplicativo](https://go.microsoft.com/fwlink/?linkid=2083908) usando sua conta pessoal, ou sua conta corporativa ou de estudante.
55 |
56 | 2. Escolha **Novo registro**.
57 |
58 | 3. Na seção **Nome**, insira um nome de aplicativo relevante que será exibido aos usuários do aplicativo
59 |
60 | 1. Na seção **Tipos de conta com suporte**, selecione **Contas em qualquer diretório organizacional e contas pessoais da Microsoft (por exemplo, Skype, Xbox, Outlook.com)**.
61 |
62 | 1. Selecione **Registrar** para criar o aplicativo.
63 |
64 | A página Visão geral do aplicativo mostra as propriedades do seu aplicativo.
65 |
66 | 4. Copie a **ID do aplicativo (cliente)**. Esse é o identificador exclusivo do aplicativo.
67 |
68 | 5. Na lista de páginas para o aplicativo, selecione **Autenticação**.
69 |
70 | 6. Na seção **URIs de Redirecionamento**, escolha **Web** na lista suspensa **Tipo** e insira *http://localhost:4200/* como o **URI de Redirecionamento**.
71 |
72 | 1. Em **Configurações Avançadas** habilitar o fluxo de concessão implícita, marque as caixas **Tokens de acesso** e **Tokens de ID**
73 |
74 | 8. Escolha **Salvar**.
75 |
76 | ## Criar e executar o exemplo
77 |
78 | 1. Usando seu IDE favorito, abra **configs.ts** em *src/app/shared*.
79 |
80 | 2. Substitua o valor do espaço reservado **ENTER_YOUR_CLIENT_ID** pela ID do aplicativo de seu aplicativo do Azure registrado.
81 |
82 | 3. Em um prompt de comando, execute o seguinte comando no diretório raiz: `npm install`. Isso instala dependências do projeto, incluindo a biblioteca de autenticação do lado do cliente [HelloJS](http://adodson.com/hello.js/) e o [SDK de JavaScript do Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript).
83 |
84 | 4. Execute`npm start` para iniciar o servidor de desenvolvimento.
85 |
86 | 5. Navegue até [http://localhost:4200/](http://localhost:4200/) no navegador da Web.
87 |
88 | 6. Clique no botão **Entrar com sua conta Microsoft**.
89 |
90 | 7. Entre com sua conta pessoal, corporativa ou de estudante, e conceda as permissões solicitadas.
91 |
92 | 8. Clique no botão **Gravar no Excel**. Verifique se as linhas foram adicionadas ao arquivo **demo.xslx** que você carregou na pasta raiz do OneDrive.
93 |
94 |
95 | ## Colaboração
96 |
97 | Se quiser contribuir para esse exemplo, confira [CONTRIBUTING.MD](/CONTRIBUTING.md).
98 |
99 | Este projeto adotou o [Código de Conduta de Código Aberto da Microsoft](https://opensource.microsoft.com/codeofconduct/). Para saber mais, confira as [Perguntas frequentes sobre o Código de Conduta](https://opensource.microsoft.com/codeofconduct/faq/) ou entre em contato pelo [opencode@microsoft.com](mailto:opencode@microsoft.com) se tiver outras dúvidas ou comentários.
100 |
101 | ## Perguntas e comentários
102 |
103 | Gostaríamos de saber sua opinião sobre este exemplo. Você pode enviar perguntas e sugestões na seção [Problemas](https://github.com/microsoftgraph/angular-excelstarter-sample/issues) deste repositório.
104 |
105 | As perguntas sobre o desenvolvimento do Microsoft Graph em geral devem ser postadas no [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Não deixe de marcar as perguntas ou comentários com [microsoftgraph].
106 |
107 | ## Recursos adicionais
108 |
109 | - [Outros exemplos de conexão usando o Microsoft Graph](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
110 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
111 |
112 | ## Direitos autorais
113 | Copyright (c) 2017 Microsoft. Todos os direitos reservados.
114 |
--------------------------------------------------------------------------------
/README-localized/README-ru-ru.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-excel
5 | - office-onedrive
6 | languages:
7 | - typescript
8 | description: "В этом примере показано, как подключить приложение Angular 4.0 к рабочей или учебной учетной записи Майкрософт, используя API Microsoft Graph"
9 | extensions:
10 | contentType: samples
11 | technologies:
12 | - Mcirosoft Graph
13 | - Microsoft identity platform
14 | platforms:
15 | - AngularJS
16 | createdDate: 8/28/2017 3:55:43 PM
17 | ---
18 | # Пример использования Microsoft Graph в Excel Starter для Angular 4
19 |
20 | ## Содержание
21 |
22 | * [Введение](#introduction)
23 | * [Необходимые компоненты](#prerequisites)
24 | * [Регистрация приложения](#register-the-application)
25 | * [Сборка и запуск примера](#build-and-run-the-sample)
26 | * [Вопросы и комментарии](#questions-and-comments)
27 | * [Участие](#contributing)
28 | * [Дополнительные ресурсы](#additional-resources)
29 |
30 | ## Введение
31 |
32 | В этом примере показано, как подключить приложение Angular 4.0 к рабочей или учебной учетной записи Майкрософт (Azure Active Directory), используя [API Microsoft Graph](https://developer.microsoft.com/en-us/graph/) с [пакетом SDK для JavaScript в Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript), чтобы получить сведения о пользователе, выполнившем вход, и отправить эти сведения в файл Excel, хранящийся в OneDrive.
33 |
34 | 
35 |
36 | После проверки подлинности и авторизации приложение получает имя и адрес электронной почты пользователя, выполнившего вход.
37 |
38 | 
39 |
40 | При нажатии кнопки **Запись в Excel** приложение записывает сведения о пользователе в файл Excel, хранящийся в корневой папке OneDrive пользователя.
41 |
42 | 
43 |
44 | ## Необходимые компоненты
45 |
46 | Для использования этого примера необходимы следующие компоненты:
47 | * [Node.js](https://nodejs.org/). Платформа Node необходима для установки зависимостей и запуска примера на сервере разработки.
48 | * [Angular CLI](https://github.com/angular/angular-cli)
49 | * [Учетная запись Майкрософт](https://www.outlook.com) или [учетная запись Office 365 для бизнеса](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
50 | * Отправьте файл **demo.xlsx**, находящийся в корневой папке этого репозитория, в корневую папку вашей учетной записи OneDrive. Этот файл содержит пустую таблицу с двумя столбцами.
51 |
52 | ## Регистрация приложения
53 |
54 | 1. Войдите на [Портал Azure — Регистрация приложений](https://go.microsoft.com/fwlink/?linkid=2083908) с помощью личной, рабочей или учебной учетной записи.
55 |
56 | 2. Выберите **Новая регистрация**.
57 |
58 | 3. В разделе **Имя** введите понятное имя приложения, которое будет отображаться для пользователей приложения
59 |
60 | 1. В разделе **Поддерживаемые типы учетных записей** выберите **Учетные записи в любом каталоге организации и личные учетные записи Майкрософт (например, Skype, Xbox, Outlook.com)**
61 |
62 | 1. Чтобы создать приложение, нажмите кнопку **Зарегистрировать**.
63 |
64 | На странице приложения "Обзор" приводятся свойства приложения.
65 |
66 | 4. Скопируйте **идентификатор приложения (клиента)**. Это уникальный идентификатор приложения.
67 |
68 | 5. В списке страниц приложения выберите **Проверка подлинности**.
69 |
70 | 6. В разделе **URI перенаправления** из раскрывающегося списка **Тип** выберите **Интернет** и введите *http://localhost:4200/* в качестве **URI перенаправления**.
71 |
72 | 1. В разделе **Дополнительные параметры** включите последовательность операций неявного предоставления разрешений, установив флажки **Маркеры доступа** и **Маркеры ИД**
73 |
74 | 8. Выберите команду **Сохранить**.
75 |
76 | ## Сборка и запуск примера
77 |
78 | 1. Используя свою любимую среду IDE, откройте **configs.ts** в *src/app/shared*.
79 |
80 | 2. Замените текст **ENTER_YOUR_CLIENT_ID** на идентификатор зарегистрированного приложения Azure.
81 |
82 | 3. Откройте командную строку и выполните приведенную ниже команду в корневом каталоге: `npm install`. При этом устанавливаются зависимости проекта, в том числе клиентская библиотека проверки подлинности [HelloJS](http://adodson.com/hello.js/) и [пакет SDK для JavaScript в Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript).
83 |
84 | 4. Выполните команду `npm start`, чтобы запустить сервер разработки.
85 |
86 | 5. Введите адрес [http://localhost:4200/](http://localhost:4200/) в веб-браузере.
87 |
88 | 6. Нажмите кнопку **Вход с помощью учетной записи Майкрософт**.
89 |
90 | 7. Войдите с помощью личной, рабочей или учебной учетной записи и предоставьте необходимые разрешения.
91 |
92 | 8. Нажмите кнопку **Запись в Excel**. Убедитесь, что в файл **demo.xslx**, который вы отправили в корневую папку OneDrive, добавлены строки.
93 |
94 |
95 | ## Участие
96 |
97 | Если вы хотите добавить код в этот пример, просмотрите статью [CONTRIBUTING.MD](/CONTRIBUTING.md).
98 |
99 | Этот проект соответствует [Правилам поведения разработчиков открытого кода Майкрософт](https://opensource.microsoft.com/codeofconduct/). Дополнительные сведения см. в разделе [часто задаваемых вопросов о правилах поведения](https://opensource.microsoft.com/codeofconduct/faq/). Если у вас возникли вопросы или замечания, напишите нам по адресу [opencode@microsoft.com](mailto:opencode@microsoft.com).
100 |
101 | ## Вопросы и комментарии
102 |
103 | Мы будем рады узнать ваше мнение об этом примере. Вы можете отправлять нам свои вопросы и предложения с помощью вкладки [Проблемы](https://github.com/microsoftgraph/angular-excelstarter-sample/issues) этого репозитория.
104 |
105 | Общие вопросы о разработке решений для Microsoft Graph следует задавать на сайте [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Обязательно помечайте свои вопросы и комментарии тегом [microsoftgraph].
106 |
107 | ## Дополнительные ресурсы
108 |
109 | - [Другие примеры приложений, подключающихся с использованием Microsoft Graph](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
110 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
111 |
112 | ## Авторские права
113 | (c) Корпорация Майкрософт (Microsoft Corporation), 2017. Все права защищены.
114 |
--------------------------------------------------------------------------------
/README-localized/README-es-es.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-excel
5 | - office-onedrive
6 | languages:
7 | - typescript
8 | description: "En este ejemplo se muestra cómo conectar una aplicación de Angular 4.0 a una cuenta profesional o educativa de Microsoft con la API de Microsoft Graph."
9 | extensions:
10 | contentType: samples
11 | technologies:
12 | - Mcirosoft Graph
13 | - Microsoft identity platform
14 | platforms:
15 | - AngularJS
16 | createdDate: 8/28/2017 3:55:43 PM
17 | ---
18 | # Ejemplo de Microsoft Graph Excel Starter para Angular 4
19 |
20 | ## Tabla de contenido
21 |
22 | * [Introducción](#introduction)
23 | * [Requisitos previos](#prerequisites)
24 | * [Registrar la aplicación](#register-the-application)
25 | * [Compilar y ejecutar el ejemplo](#build-and-run-the-sample)
26 | * [Preguntas y comentarios](#questions-and-comments)
27 | * [Colaboradores](#contributing)
28 | * [Recursos adicionales](#additional-resources)
29 |
30 | ## Introducción
31 |
32 | Este ejemplo muestra cómo conectar una aplicación de Angular 4.0 a cuentas de Microsoft profesionales o educativas (Azure Active Directory) usando la [API de Microsoft Graph](https://developer.microsoft.com/en-us/graph/) con el [SDK de JavaScript de Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript) para obtener información sobre el usuario que ha iniciado sesión y cargar esa información en un archivo de Excel almacenado en OneDrive.
33 |
34 | 
35 |
36 | Una vez que autentique y autorice la aplicación, obtendrá el nombre y la dirección de correo electrónico del usuario que ha iniciado sesión.
37 |
38 | 
39 |
40 | Al hacer clic en el botón **Escribir en Excel**, la aplicación escribe la información del usuario en un archivo de Excel almacenado en la carpeta de OneDrive raíz del usuario.
41 |
42 | 
43 |
44 | ## Requisitos previos
45 |
46 | Para usar este ejemplo, necesita lo siguiente:
47 | * [Node.js](https://nodejs.org/). Node es necesario para ejecutar el ejemplo en un servidor de desarrollo y para instalar dependencias.
48 | * [CLI de Angular](https://github.com/angular/angular-cli)
49 | * Una [cuenta de Microsoft](https://www.outlook.com) o una [cuenta de Office 365 para empresas](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
50 | * Cargue el archivo **demo.xlsx** en la raíz de este repositorio en la carpeta raíz de la cuenta de OneDrive. Este archivo contiene una tabla vacía con dos columnas.
51 |
52 | ## Registrar la aplicación
53 |
54 | 1. Inicie sesión en el [Portal de Azure: registro de aplicaciones](https://go.microsoft.com/fwlink/?linkid=2083908) con su cuenta personal, profesional o educativa.
55 |
56 | 2. Seleccione **Nuevo registro**.
57 |
58 | 3. En la sección **Nombre**, escriba un nombre significativo para la aplicación, que se mostrará a los usuarios de la aplicación.
59 |
60 | 1. En **Tipos de cuenta admitidos**, seleccione **Cuentas en cualquier directorio de organización y cuentas personales de Microsoft (por ejemplo, Skype, Xbox o Outlook.com).**
61 |
62 | 1. Seleccione **Registrar** para crear la aplicación.
63 |
64 | En la página de información general de la aplicación se muestran las propiedades de la aplicación.
65 |
66 | 4. Copie el **Id. de la aplicación (cliente)**. Este es el identificador único de la aplicación.
67 |
68 | 5. En la lista de páginas de la aplicación, seleccione **Autenticación**.
69 |
70 | 6. En la sección **Redirigir URI**, elija **Web** en el menú desplegable **Tipo** y escriba *http://localhost:4200/* como la **URI de redirección**.
71 |
72 | 1. En **Configuración avanzada**, habilite el flujo de concesiones implícitas marcando las casillas **Tokens de acceso** y **Tokens de ID.**
73 |
74 | 8. Elija **Guardar**.
75 |
76 | ## Compilar y ejecutar el ejemplo
77 |
78 | 1. Con su IDE favorito, abra **configs.ts** en *src/app/shared*.
79 |
80 | 2. Reemplace el valor del marcador de posición **ENTER_YOUR_CLIENT_ID** con el ID. de aplicación de la aplicación de Azure registrada.
81 |
82 | 3. En un símbolo del sistema, ejecute el siguiente comando en el directorio raíz: `npm install`. De este forma, se instalan las dependencias del proyecto, incluida la biblioteca de autenticación del cliente [HelloJS](http://adodson.com/hello.js/) y el [SDK de JavaScript de Microsoft Graph](https://github.com/microsoftgraph/msgraph-sdk-javascript).
83 |
84 | 4. Ejecute `npm start` para iniciar el servidor de desarrollo.
85 |
86 | 5. Vaya a [http://localhost:4200/](http://localhost:4200/) en el explorador web.
87 |
88 | 6. Seleccione el botón **Iniciar sesión con su cuenta de Microsoft**.
89 |
90 | 7. Inicie sesión con su cuenta personal, profesional o educativa y conceda los permisos solicitados.
91 |
92 | 8. Haga clic en el botón **Escribir en Excel**. Compruebe que las filas se han agregado al archivo **demo.xslx** que cargó en la carpeta raíz de OneDrive.
93 |
94 |
95 | ## Colaborar
96 |
97 | Si quiere hacer su aportación a este ejemplo, vea [CONTRIBUTING.MD](/CONTRIBUTING.md).
98 |
99 | Este proyecto ha adoptado el [Código de conducta de código abierto de Microsoft](https://opensource.microsoft.com/codeofconduct/). Para obtener más información, vea [Preguntas frecuentes sobre el código de conducta](https://opensource.microsoft.com/codeofconduct/faq/) o póngase en contacto con [opencode@microsoft.com](mailto:opencode@microsoft.com) si tiene otras preguntas o comentarios.
100 |
101 | ## Preguntas y comentarios
102 |
103 | Nos encantaría recibir sus comentarios sobre este ejemplo. Puede enviarnos sus preguntas y sugerencias a través de la sección [Problemas](https://github.com/microsoftgraph/angular-excelstarter-sample/issues) de este repositorio.
104 |
105 | Las preguntas generales sobre el desarrollo de Microsoft Graph deben publicarse en [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Asegúrese de que sus preguntas o comentarios se etiquetan con [microsoftgraph].
106 |
107 | ## Recursos adicionales
108 |
109 | - [Otros ejemplos Connect de Microsoft Graph](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
110 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
111 |
112 | ## Copyright
113 | Copyright (c) 2017 Microsoft. Todos los derechos reservados.
114 |
--------------------------------------------------------------------------------
/README-localized/README-fr-fr.md:
--------------------------------------------------------------------------------
1 | ---
2 | page_type: sample
3 | products:
4 | - office-excel
5 | - office-onedrive
6 | languages:
7 | - typescript
8 | description: "Cet exemple présente la connexion entre une application Angular 4.0 et un compte professionnel ou scolaire utilisant l’API Microsoft Graph."
9 | extensions:
10 | contentType: samples
11 | technologies:
12 | - Mcirosoft Graph
13 | - Microsoft identity platform
14 | platforms:
15 | - AngularJS
16 | createdDate: 8/28/2017 3:55:43 PM
17 | ---
18 | # Exemple de démarrage Microsoft Graph Excel pour Angular 4
19 |
20 | ## Table des matières
21 |
22 | * [Introduction](#introduction)
23 | * [Conditions préalables](#prerequisites)
24 | * [Inscription de l’application](#register-the-application)
25 | * [Création et exécution de l’exemple](#build-and-run-the-sample)
26 | * [Questions et commentaires](#questions-and-comments)
27 | * [Contribution](#contributing)
28 | * [Ressources supplémentaires](#additional-resources)
29 |
30 | ## Introduction
31 |
32 | Cet exemple présente la connexion d'une application Angular 4.0 à un compte professionnel ou scolaire Microsoft (Azure Active Directory) utilisant l’[API Microsoft Graph](https://developer.microsoft.com/en-us/graph/) avec le [Kit de développement logiciel Microsoft JavaScript](https://github.com/microsoftgraph/msgraph-sdk-javascript) pour obtenir les informations de connexion de l'utilisateur et les télécharger dans un fichier Excel stocké dans OneDrive.
33 |
34 | 
35 |
36 | Une fois l’application authentifiée et autorisée, elle obtient le nom et l’adresse de courrier électronique de l’utilisateur connecté.
37 |
38 | 
39 |
40 | Lorsque vous cliquez sur le bouton **Écrire à Excel**, l’application écrit les informations utilisateur dans un fichier Excel stocké dans le dossier racine OneDrive de l’utilisateur.
41 |
42 | 
43 |
44 | ## Conditions préalables
45 |
46 | Pour utiliser cet exemple, l'élément suivant est nécessaire :
47 | * [Node.js](https://nodejs.org/). Un nœud est nécessaire pour exécuter l’exemple sur un serveur de développement et installer des dépendances.
48 | * [Angular CLI](https://github.com/angular/angular-cli)
49 | * Soit un [compte Microsoft](https://www.outlook.com), soit [compte Office 365 pour les entreprises](https://msdn.microsoft.com/en-us/office/office365/howto/setup-development-environment#bk_Office365Account)
50 | * Téléchargez le fichier **demo.xlsx** situé dans la racine de ce référentiel vers le dossier racine de votre compte OneDrive. Ce fichier contient un tableau vide avec deux colonnes.
51 |
52 | ## Enregistrement de l’application
53 |
54 | 1. Connectez-vous au [Portail Azure : inscription des applications](https://go.microsoft.com/fwlink/?linkid=2083908) à l'aide votre compte personnel, professionnel ou scolaire.
55 |
56 | 2. Sélectionnez **Nouvelle inscription**.
57 |
58 | 3. Dans la section **Nom**, saisissez un nom d’application explicite qui s’affichera pour les utilisateurs de l’application.
59 |
60 | 1. Dans la section **Types de comptes pris en charge**, sélectionnez **Comptes dans un annuaire organisationnel et comptes personnels Microsoft (par ex. Skype, Xbox, Outlook.com)**
61 |
62 | 1. Sélectionnez **S’inscrire** pour créer l’application.
63 |
64 | La page de présentation de l’application affiche les propriétés de votre application.
65 |
66 | 4. Copiez l'**ID de l’application (client)**. Il s’agit de l’identificateur unique de votre application.
67 |
68 | 5. Dans la liste des pages de l’application, sélectionnez **Authentification**.
69 |
70 | 6. Dans la section **Rediriger les URI**, sélectionnez **web** dans la liste déroulante **Taper**, puis entrez *http://localhost:4200/* en tant qu’**URI de redirection**.
71 |
72 | 1. Dans les **Paramètres avancés**, activez le flux d’octroi implicite en vérifiant les **Jetons d’accès** et cases de **Jetons d'ID**
73 |
74 | 8. Choisissez **Enregistrer**.
75 |
76 | ## Création et exécution de l’exemple
77 |
78 | 1. À l’aide de votre Environnement de développement intégré préféré(IDE), ouvrez **config.ts** dans *src/app/shared*.
79 |
80 | 2. Dans le champ **ENTER_YOUR_CLIENT_ID**, remplacez la valeur d'espace réservé par l’ID d’application de votre application Azure inscrite.
81 |
82 | 3. Dans une invite de commandes, exécutez la commande suivante dans le répertoire racine : `npm install`. Cette commande installe les dépendances de projet, y compris la bibliothèque d'authentification côté client [HelloJS](http://adodson.com/hello.js/) et le [Kit de développement logiciel (SDK) Microsoft Graph JavaScript](https://github.com/microsoftgraph/msgraph-sdk-javascript).
83 |
84 | 4. Exécutez`npm start` pour démarrer le serveur de développement.
85 |
86 | 5. Naviguer vers [http://localhost:4200/](http://localhost:4200/) dans votre navigateur web.
87 |
88 | 6. Sélectionnez le bouton **Connectez-vous à l’aide de votre compte Microsoft**.
89 |
90 | 7. Connectez-vous à l'aide de votre compte personnel, professionnel ou scolaire et accordez les autorisations demandées.
91 |
92 | 8. Cliquez sur le bouton **Écrire à Excel**. Vérifiez que les lignes ont été ajoutées au fichier **demo.xslx** que vous avez téléchargé dans votre dossier racine OneDrive.
93 |
94 |
95 | ## Contribution
96 |
97 | Si vous souhaitez contribuer à cet exemple, voir [CONTRIBUTING.MD](/CONTRIBUTING.md).
98 |
99 | Ce projet a adopté le [code de conduite Open Source de Microsoft](https://opensource.microsoft.com/codeofconduct/). Pour en savoir plus, reportez-vous à la [FAQ relative au code de conduite](https://opensource.microsoft.com/codeofconduct/faq/) ou contactez [opencode@microsoft.com](mailto:opencode@microsoft.com) pour toute question ou tout commentaire.
100 |
101 | ## Questions et commentaires
102 |
103 | Nous serions ravis de connaître votre opinion sur cet exemple. Vous pouvez faire part de vos questions et suggestions dans la rubrique [Problèmes](https://github.com/microsoftgraph/angular-excelstarter-sample/issues) de ce référentiel.
104 |
105 | Les questions générales sur le développement Microsoft Graph doivent être publiées sur [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoftgraph). Veillez à poser vos questions ou à rédiger vos commentaires en utilisant les tags [microsoftgraph].
106 |
107 | ## Ressources supplémentaires
108 |
109 | - [Autres exemples de connexion avec Microsoft Graph](https://github.com/MicrosoftGraph?utf8=%E2%9C%93&query=-Connect)
110 | - [Microsoft Graph](https://developer.microsoft.com/en-us/graph/)
111 |
112 | ## Copyright
113 | Copyright (c) 2017 Microsoft. Tous droits réservés.
114 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | Contribute to this documentation
2 |
3 | Thank you for your interest in our documentation!
4 |
5 | * [Ways to contribute](#ways-to-contribute)
6 | * [Contribute using GitHub](#contribute-using-github)
7 | * [Contribute using Git](#contribute-using-git)
8 | * [How to use Markdown to format your topic](#how-to-use-markdown-to-format-your-topic)
9 | * [FAQ](#faq)
10 | * [More resources](#more-resources)
11 |
12 | ## Ways to contribute
13 |
14 | Here are some ways you can contribute to this documentation:
15 |
16 | * To make small changes to an article, [Contribute using GitHub](#contribute-using-github).
17 | * To make large changes, or changes that involve code, [Contribute using Git](#contribute-using-git).
18 | * Report documentation bugs via GitHub Issues
19 | * Request new documentation at the [Office Developer Platform UserVoice](http://officespdev.uservoice.com) site.
20 |
21 | ## Contribute using GitHub
22 |
23 | Use GitHub to contribute to this documentation without having to clone the repo to your desktop. This is the easiest way to create a pull request in this repository. Use this method to make a minor change that doesn't involve code changes.
24 |
25 | **Note** Using this method allows you to contribute to one article at a time.
26 |
27 | ### To Contribute using GitHub
28 |
29 | 1. Find the article you want to contribute to on GitHub.
30 |
31 | If the article is in MSDN, choose the **suggest and submit changes** link in the **Contribute to this content** section and you'll be taken to the same article on GitHub.
32 | 2. Once you are on the article in GitHub, sign in to GitHub (get a free account [Join GitHub](https://github.com/join).
33 | 3. Choose the **pencil icon** (edit the file in your fork of this project) and make your changes in the **<>Edit file** window.
34 | 4. Scroll to the bottom and enter a description.
35 | 5. Choose **Propose file change**>**Create pull request**.
36 |
37 | You now have successfully submitted a pull request. Pull requests are typically reviewed within 10 business days.
38 |
39 |
40 | ## Contribute using Git
41 |
42 | Use Git to contribute substantive changes, such as:
43 |
44 | * Contributing code.
45 | * Contributing changes that affect meaning.
46 | * Contributing large changes to text.
47 | * Adding new topics.
48 |
49 | ### To Contribute using Git
50 |
51 | 1. If you don't have a GitHub account, set one up at [GitHub](https://github.com/join).
52 | 2. After you have an account, install Git on your computer. Follow the steps in [Setting up Git Tutorial](https://help.github.com/articles/set-up-git/).
53 | 3. To submit a pull request using Git, follow the steps in [Use GitHub, Git, and this repository](#use-github-git-and-this-repository).
54 | 4. You will be asked to sign the Contributor's License Agreement if you are:
55 |
56 | * A member of the Microsoft Open Technologies group.
57 | * A contributors who doesn't work for Microsoft.
58 |
59 | As a community member, you must sign the Contribution License Agreement (CLA) before you can contribute large submissions to a project. You only need to complete and submit the documentation once. Carefully review the document. You may be required to have your employer sign the document.
60 |
61 | Signing the CLA does not grant you rights to commit to the main repository, but it does mean that the Office Developer and Office Developer Content Publishing teams will be able to review and approve your contributions. You will be credited for your submissions.
62 |
63 | Pull requests are typically reviewed within 10 business days.
64 |
65 | ## Use GitHub, Git, and this repository
66 |
67 | **Note:** Most of the information in this section can be found in [GitHub Help] articles. If you're familiar with Git and GitHub, skip to the **Contribute and edit content** section for the specifics of the code/content flow of this repository.
68 |
69 | ### To set up your fork of the repository
70 |
71 | 1. Set up a GitHub account so you can contribute to this project. If you haven't done this, go to [GitHub](https://github.com/join) and do it now.
72 | 2. Install Git on your computer. Follow the steps in the [Setting up Git Tutorial] [Set Up Git].
73 | 3. Create your own fork of this repository. To do this, at the top of the page, choose the **Fork** button.
74 | 4. Copy your fork to your computer. To do this, open Git Bash. At the command prompt enter:
75 |
76 | git clone https://github.com//.git
77 |
78 | Next, create a reference to the root repository by entering these commands:
79 |
80 | cd
81 | git remote add upstream https://github.com/microsoftgraph/.git
82 | git fetch upstream
83 |
84 | Congratulations! You've now set up your repository. You won't need to repeat these steps again.
85 |
86 | ### Contribute and edit content
87 |
88 | To make the contribution process as seamless as possible, follow these steps.
89 |
90 | #### To contribute and edit content
91 |
92 | 1. Create a new branch.
93 | 2. Add new content or edit existing content.
94 | 3. Submit a pull request to the main repository.
95 | 4. Delete the branch.
96 |
97 | **Important** Limit each branch to a single concept/article to streamline the work flow and reduce the chance of merge conflicts. Content appropriate for a new branch includes:
98 |
99 | * A new article.
100 | * Spelling and grammar edits.
101 | * Applying a single formatting change across a large set of articles (for example, applying a new copyright footer).
102 |
103 | #### To create a new branch
104 |
105 | 1. Open Git Bash.
106 | 2. At the Git Bash command prompt, type `git pull upstream master:`. This creates a new branch locally that is copied from the latest MicrosoftGraph master branch.
107 | 3. At the Git Bash command prompt, type `git push origin `. This alerts GitHub to the new branch. You should now see the new branch in your fork of the repository on GitHub.
108 | 4. At the Git Bash command prompt, type `git checkout ` to switch to your new branch.
109 |
110 | #### Add new content or edit existing content
111 |
112 | You navigate to the repository on your computer by using File Explorer. The repository files are in `C:\Users\\`.
113 |
114 | To edit files, open them in an editor of your choice and modify them. To create a new file, use the editor of your choice and save the new file in the appropriate location in your local copy of the repository. While working, save your work frequently.
115 |
116 | The files in `C:\Users\\` are a working copy of the new branch that you created in your local repository. Changing anything in this folder doesn't affect the local repository until you commit a change. To commit a change to the local repository, type the following commands in GitBash:
117 |
118 | git add .
119 | git commit -v -a -m ""
120 |
121 | The `add` command adds your changes to a staging area in preparation for committing them to the repository. The period after the `add` command specifies that you want to stage all of the files that you added or modified, checking subfolders recursively. (If you don't want to commit all of the changes, you can add specific files. You can also undo a commit. For help, type `git add -help` or `git status`.)
122 |
123 | The `commit` command applies the staged changes to the repository. The switch `-m` means you are providing the commit comment in the command line. The -v and -a switches can be omitted. The -v switch is for verbose output from the command, and -a does what you already did with the add command.
124 |
125 | You can commit multiple times while you are doing your work, or you can commit once when you're done.
126 |
127 | #### Submit a pull request to the main repository
128 |
129 | When you're finished with your work and are ready to have it merged into the main repository, follow these steps.
130 |
131 | #### To submit a pull request to the main repository
132 |
133 | 1. In the Git Bash command prompt, type `git push origin `. In your local repository, `origin` refers to your GitHub repository that you cloned the local repository from. This command pushes the current state of your new branch, including all commits made in the previous steps, to your GitHub fork.
134 | 2. On the GitHub site, navigate in your fork to the new branch.
135 | 3. Choose the **Pull Request** button at the top of the page.
136 | 4. Verify the Base branch is `microsoftgraph/@master` and the Head branch is `/@`.
137 | 5. Choose the **Update Commit Range** button.
138 | 6. Add a title to your pull request, and describe all the changes you're making.
139 | 7. Submit the pull request.
140 |
141 | One of the site administrators will process your pull request. Your pull request will surface on the microsoftgraph/ site under Issues. When the pull request is accepted, the issue will be resolved.
142 |
143 | #### Create a new branch after merge
144 |
145 | After a branch is successfully merged (that is, your pull request is accepted), don't continue working in that local branch. This can lead to merge conflicts if you submit another pull request. To do another update, create a new local branch from the successfully merged upstream branch, and then delete your initial local branch.
146 |
147 | For example, if your local branch X was successfully merged into the OfficeDev/microsoft-graph-docs master branch and you want to make additional updates to the content that was merged. Create a new local branch, X2, from the OfficeDev/microsoft-graph-docs master branch. To do this, open GitBash and execute the following commands:
148 |
149 | cd microsoft-graph-docs
150 | git pull upstream master:X2
151 | git push origin X2
152 |
153 | You now have local copies (in a new local branch) of the work that you submitted in branch X. The X2 branch also contains all the work other writers have merged, so if your work depends on others' work (for example, shared images), it is available in the new branch. You can verify that your previous work (and others' work) is in the branch by checking out the new branch...
154 |
155 | git checkout X2
156 |
157 | ...and verifying the content. (The `checkout` command updates the files in `C:\Users\\microsoft-graph-docs` to the current state of the X2 branch.) Once you check out the new branch, you can make updates to the content and commit them as usual. However, to avoid working in the merged branch (X) by mistake, it's best to delete it (see the following **Delete a branch** section).
158 |
159 | #### Delete a branch
160 |
161 | Once your changes are successfully merged into the main repository, delete the branch you used because you no longer need it. Any additional work should be done in a new branch.
162 |
163 | #### To delete a branch
164 |
165 | 1. In the Git Bash command prompt, type `git checkout master`. This ensures that you aren't in the branch to be deleted (which isn't allowed).
166 | 2. Next, at the command prompt, type `git branch -d `. This deletes the branch on your computer only if it has been successfully merged to the upstream repository. (You can override this behavior with the `–D` flag, but first be sure you want to do this.)
167 | 3. Finally, type `git push origin :` at the command prompt (a space before the colon and no space after it). This will delete the branch on your github fork.
168 |
169 | Congratulations, you have successfully contributed to the project!
170 |
171 | ## How to use Markdown to format your topic
172 |
173 | ### Article template
174 |
175 | The [markdown template](/articles/0-markdown-template-for-new-articles.md) contains the basic Markdown for a topic that includes a table of contents, sections with subheadings, links to other Office developer topics, links to other sites, bold text, italic text, numbered and bulleted lists, code snippets, and images.
176 |
177 |
178 | ### Standard Markdown
179 |
180 | All of the articles in this repository use Markdown. A complete introduction (and listing of all the syntax) can be found at [Markdown Home] [].
181 |
182 | ## FAQ
183 |
184 | ### How do I get a GitHub account?
185 |
186 | Fill out the form at [Join GitHub](https://github.com/join) to open a free GitHub account.
187 |
188 | ### Where do I get a Contributor's License Agreement?
189 |
190 | You will automatically be sent a notice that you need to sign the Contributor's License Agreement (CLA) if your pull request requires one.
191 |
192 | As a community member, **you must sign the Contribution License Agreement (CLA) before you can contribute large submissions to this project**. You only need complete and submit the documentation once. Carefully review the document. You may be required to have your employer sign the document.
193 |
194 | ### What happens with my contributions?
195 |
196 | When you submit your changes, via a pull request, our team will be notified and will review your pull request. You will receive notifications about your pull request from GitHub; you may also be notified by someone from our team if we need more information. We reserve the right to edit your submission for legal, style, clarity, or other issues.
197 |
198 | ### Can I become an approver for this repository's GitHub pull requests?
199 |
200 | Currently, we are not allowing external contributors to approve pull requests in this repository.
201 |
202 | ### How soon will I get a response about my change request or issue?
203 |
204 | We typically review pull requests and respond to issues within 10 business days.
205 |
206 | ## More resources
207 |
208 | * To learn more about Markdown, go to the Git creator's site [Daring Fireball].
209 | * To learn more about using Git and GitHub, first check out the [GitHub Help section] [GitHub Help].
210 |
211 | [GitHub Home]: http://github.com
212 | [GitHub Help]: http://help.github.com/
213 | [Set Up Git]: http://help.github.com/win-set-up-git/
214 | [Markdown Home]: http://daringfireball.net/projects/markdown/
215 | [Daring Fireball]: http://daringfireball.net/
216 |
--------------------------------------------------------------------------------