मैं एक वेबपैप पर काम कर रहा हूं जो एज़ूर पर होस्ट किया गया है, कॉर्पोरेट खाता ईमेल का उपयोग करने में उपयोगकर्ताओं को साइन करने के लिए माइक्रोसॉफ्ट ग्राफ एपीआई का उपयोग करता है। अब, मैं साइन इन उपयोगकर्ता को पढ़ना चाहता हूं और उसे अपने विचार पर प्रदर्शित करना चाहता हूं, हालांकि, मुझे एक InvalidAuthenticationToken त्रुटि मिल रही है।

AuthHelper.ts:

import { Injectable } from "@angular/core";
import { SvcConsts } from "../service/svcConsts";
import { HttpModule } from "@angular/http";
import { HttpClientModule } from "@angular/common/http";

@Injectable()
export class AuthHelper {
  //function to parse the url query string
  private parseQueryString = function(url) {
    var params = {},
      queryString = url.substring(1),
      regex = /([^&=]+)=([^&]*)/g,
      m;
    while ((m = regex.exec(queryString))) {
      params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }
    return params;
  };
  private params = this.parseQueryString(location.hash);
  public access_token: string = null;

  constructor() {
    //check for id_token or access_token in url
    if (this.params["id_token"] != null) this.getAccessToken();
    else if (this.params["access_token"] != null) this.access_token = this.params["access_token"];
  }

  login() {
    //redirect to get id_token
    window.location.href =
      "https://login.microsoftonline.com/" +
      SvcConsts.TENANT_ID +
      "/oauth2/authorize?response_type=id_token&client_id=" +
      SvcConsts.CLIENT_ID +
      "&redirect_uri=" +
      encodeURIComponent(window.location.href) +
      "&state=SomeState&nonce=SomeNonce";
  }

  private getAccessToken() {
    //redirect to get access_token
    window.location.href =
      "https://login.microsoftonline.com/" +
      SvcConsts.TENANT_ID +
      "/oauth2/authorize?response_type=token&client_id=" +
      SvcConsts.CLIENT_ID +
      "&resource=" +
      SvcConsts.GRAPH_RESOURCE +
      "&redirect_uri=" +
      encodeURIComponent(window.location.href) +
      "&prompt=none&state=SomeState&nonce=SomeNonce";
  }
}

SvsConsts.ts:

export class SvcConsts {
  public static CLIENT_ID: string = "my client id here";
  public static TENANT_ID: string = "mydomain.azurewebsites.net";
  public static GRAPH_RESOURCE: string = "https://graph.microsoft.com";
}

HomeComponents.ts:

import { Component } from "@angular/core";
import { Http, Headers } from "@angular/http";
import { AuthHelper } from "../service/AuthHelper";
import { HttpModule } from "@angular/http";
import { HttpClientModule } from "@angular/common/http";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html"
})
export class HomeComponent {
  private users: any;
  private userPrincipalName: any;

  constructor(http: Http, authHelper: AuthHelper) {
    // Perform REST call into Microsoft Graph for files on GraphAPI
    http
      .get("https://graph.microsoft.com/v1.0/me/", {
        headers: new Headers({
          Authorization: "Bearer { access_token }",
          "Content-Type": "application/json" + authHelper.access_token
        })
      })

      .subscribe(res => {
        // Check the response status before trying to display files

        if (res.status === 200) this.users = res.json().value;
        else alert("An error occurred calling the Microsoft Graph: " + res.status);
      });
  }
}

मैं प्रदर्शित करने के लिए Home.Component.html में userPrincipalName संपत्ति का उपयोग करने की योजना बना रहा हूं, हालांकि, मुझे वह त्रुटि मिल रही है। मैंने ग्राफ़ गिटहब रिपोजिटरी द्वारा प्रदान किए गए उदाहरण का पालन किया और उनकी वेबसाइट पर दस्तावेज़ीकरण का पालन किया। क्या आप मेरी मदद कर सकते हैं कि मुझे यह त्रुटि क्यों मिल रही है?

नीचे Azure AD प्रबंधन उपकरण पर मेरे पास मौजूद अनुमतियों का स्क्रीन कैप्चर है।

AzureAD - Graph permissions

कृपया मदद करे।

0
sahmad 26 जुलाई 2018, 22:39
1
क्या आप उस टोकन का उदाहरण जोड़ सकते हैं जिसे आप वापस प्राप्त कर रहे हैं?
 – 
Marc LaFleur
30 जुलाई 2018, 18:39

2 जवाब

मुझे लगता है कि आप उपयोगकर्ता की ओर से संसाधनों को पढ़ने और लिखने के लिए Microsoft ग्राफ़ का उपयोग करना चाह सकते हैं। मैंने आपका कोड पढ़ा, और मैंने पाया कि लॉगिन फ़ंक्शन में कुछ गलतियाँ हैं।
एक्सेस टोकन प्राप्त करने के लिए, आपको उपयोगकर्ता को Azure AD v2.0 /authorize एंडपॉइंट पर रीडायरेक्ट करना चाहिए। url को यह पसंद करना चाहिए:

https://login.microsoftonline.com/{tenant}/oauth2/v2.0/authorize?
client_id={your client_id}&response_type=code 
&redirect_uri={current_url}&response_mode=query
&scope={you want the right }&state=12345


//Please check your parameters,such as response_type,response_mode

जब आप उपयोगकर्ता से प्राधिकरण प्राप्त करते हैं, तो प्रतिक्रिया में कोड पैरामीटर में प्राधिकरण कोड होगा। फिर आप अनुरोध के लिए एक्सेस टोकन प्राप्त करने के लिए इस कोड का उपयोग कर सकते हैं, यूआरएल इस तरह होना चाहिए:

POST /common/oauth2/v2.0/token HTTP/1.1
Host: https://login.microsoftonline.com
Content-Type: application/x-www-form-urlencoded

client_id=6731de76-14a6-49ae-97bc-6eba6914391e
&scope=user.read%20mail.read
&code=OAAABAAAAiL9Kn2Z27UubvWFPbm0gLWQJVzCTE9UkP3pSx1aXxUjq3n8b2JRLk4OxVXr...
&redirect_uri=http%3A%2F%2Flocalhost%2Fmyapp%2F
&grant_type=authorization_code
&client_secret=JqQX2PNo9bpM0uEihUPzyrh    // NOTE: Only required for web apps

फिर, प्रतिक्रिया में उन अनुमतियों की एक सूची होती है जिनके लिए स्कोप पैरामीटर में एक्सेस टोकन अच्छा है।
मुझे लगता है कि आपका यूआरएल त्रुटिपूर्ण है, और आप अपने अनुरोध के लिए कुछ पैरामीटर बदल सकते हैं।
संदर्भ दस्तावेज़ यहां हैं:https://developer.microsoft.com/en-us/graph/docs/concepts/auth_v2_user
अगर आपको लगता है कि मेरा उत्तर आपके लिए उपयोगी है, तो कृपया मुझे उत्तर के रूप में चिह्नित करें।धन्यवाद।

1
27 जुलाई 2018, 12:16
नहीं, यह मेरे लिए काम नहीं कर रहा है। पोस्ट विधि काम नहीं करती है। दोनों यूआरएल बदलने के बाद भी मुझे वही त्रुटि मिलती है। आपको एंगुलर 6, एएसपी.नेट कोर और विजुअल स्टूडियो का उपयोग करके बनाई गई परियोजना का उपयोग करके कामकाजी उदाहरण के साथ एक जीथब लिंक प्रदान करना चाहिए।
 – 
sahmad
27 जुलाई 2018, 22:58

क्या आप मुझे अनुरोध यूआरएल और प्रतिक्रिया दे सकते हैं?
मुझे लगता है कि आपको होमकंपोनेंट के निर्माता में लॉगिन फ़ंक्शन को कॉल करने की आवश्यकता है। आपको इस कंस्ट्रक्टर में अनुरोध बदलने की आवश्यकता हो सकती है।
और होमकंपोनेंट का कंस्ट्रक्टर इस तरह:

constructor(http: Http, authHelper: AuthHelper{
console.log(authHelper.access_token);
authHelper.login();
http.get("https://graph.microsoft.com/v1.0/me/", {  
  headers: new Headers({
    "Authorization": "Bearer "+ authHelper.access_token,
     "Content-Type": "application/json" })
})}
0
user10125476user10125476 30 जुलाई 2018, 12:05