wie man user-Bild mit Microsoft Graph-API, encoding-Problem?

Einem Blick in Microsofts Grafik-API, die speziell auf der Suche bei den eckigen Beispiel genannte „O365-Angular-Microsoft-Graph-Connect‘ – https://github.com/OfficeDev/O365-Angular-Microsoft-Graph-Connect. Erfolgreich registriert haben, ist die app und installiert die Abhängigkeiten. Jedoch beim ausführen der app bin ich richtig sehen, all die details des Benutzers abgesehen von der Bild, (alle Benutzer in unserem O365 Mietverhältnis ein Bild). Debuggen der app scheint es, die Antwort erhielt Sie von der api ist voll von ‚�‘ Symbole, die suggeriert ein encoding-Problem irgendwo. Bei Verwendung der graph API explorer bekomme ich das Bild zurückgegeben fein, die nahelegt, ist dies die app. Irgendwelche Ideen, wie man Abhilfe schaffen, damit das Beispiel funktioniert die app? Die index-html-Seite ist korrekt UTF-8 kodiert, so dass die app korrekt sieht mir die deutet auf ein Problem mit der API, aber wie die graph API explorer gibt mir das richtige Bild, die nahelegt, dass es die app.

Irgendwelche Ideen auf, wie Sie ziehen durch das Bild in der Beispiel-app von Microsoft?

Andere Gedanken sind, dass, wie das Beispiel screenshot MS verwendet einen Platzhalter-Bild ist dieser Teil der app einfach nicht funktioniert noch.

  • Dies scheint sehr seltsam. Können Sie ein fiddler trace (Sie können entfernen Sie Benutzer-token aus dem trace) bitte?
  • hast du zufällig zu finden Lösung für dieses? Ich habe das gleiche „problem“ – docs sagt, es ist Binär JPEG-Bild, aber ich kann nicht mehr arbeiten… graph.microsoft.io/en-us/docs/api-Referenz/v1.0/api/… Enthält die binären Daten des angeforderten Fotos. Der HTTP-Antwort-code 200.
InformationsquelleAutor RichW | 2016-02-24



3 Replies
  1. 1

    Dies ist eine ältere Frage, aber ich hoffe, das wird hilfreich sein, einige (C#).

    Fangen die eingehenden array als ein byteArray konvertieren und es zu einer base64string. Diese können leicht in Bilder umgewandelt oder gespeichert werden in der DB ist

        public static async void GetPhoto(HttpClient client, string id)
        {
            var resp = await client.GetAsync(@"https://graph.microsoft.com/v1.0/users/" + id + "/photos/240x240/$value");
    
            var buffer = await resp.Content.ReadAsByteArrayAsync();
            var byteArray = buffer.ToArray();
    
            string base64String = Convert.ToBase64String(byteArray);
            if(base64String != null && base64String != "")
            {
                //Insert into database or convert.
            }
        }
    
  2. 0

    Nach dem spielen mit Briefträger (Chrome-Erweiterung für das spielen mit dem REST etc.) es ist sehr klar, dass das zurückgegebene Bild ist ok und „normal“ ist und dass unser code muss sicherstellen, dass es gespeichert ist, wie es sein sollte.

    Danach habe ich gehackt das NodeJS-code, der vielleicht anderen helfen newbies wie mich:)

    /**
         /users/<id | userPrincipalName>/photo/$value
     */
    
    function getUserPhoto(accessToken, userId, callback) {
              var options = {
                host: 'graph.microsoft.com',
                path: "/v1.0/users/" +userId + "/photo/$value",
                method: 'GET',
                headers: {
                  Authorization: 'Bearer ' + accessToken
                }
              };
    
              https.get(options, function (response) {
                response.setEncoding('binary'); /* This is very very necessary! */
                var body = '';
                response.on('data', function (d) {
                  body += d;
                });
                response.on('end', function () {
                  var error;
                  if (response.statusCode === 200) {
                        /* save as "normal image" */
                    fs.writeFile('./public/img/image.jpeg', body, 'binary',  function(err){
                        if (err) throw err
                        console.log('Image saved ok')
                    })
                    /* callback - for example show in template as base64 image */
                    callback(new Buffer(body, 'binary').toString('base64'));
                  } else {
                    error = new Error();
                    error.code = response.statusCode;
                    error.message = response.statusMessage;
                    //The error body sometimes includes an empty space
                    //before the first character, remove it or it causes an error.
                    body = body.trim();
                    error.innerError = JSON.parse(body).error;
                    callback(error, null);
                  }
                });
              }).on('error', function (e) {
                callback(e, null);
              });
            }
    
  3. 0

    TypeScript code, um das Foto

      @observable private photo: string;
    
        getPhoto('/me/photos/48x48/$value').then((photo) => {
          this.photo = photo;
        }).catch(error => {});
      }
    
    <img className='br24' src={this.photo}/>
    
    export function getPhoto(query: string): Promise<string> {
      let promise = new Promise<string>((resolve, reject) => {
        adalContext.AuthContext.acquireToken("https://graph.microsoft.com", (error, token) => {
          if (error) {
            reject(error);
          } else {
            if (query.indexOf('/') != 0)
              query = '/' + query;
            let u = `https://graph.microsoft.com/v1.0${query}`;
            axios.get(u, { headers: { Authorization: `Bearer ${token}`, encoding: null }, responseType: 'arraybuffer' }).then(
              val => {
                let photo = 'data:' + val.headers['content-type'] + ';base64,' + new Buffer(val.data, 'binary').toString('base64');
                resolve(photo);
              },
              error => {
                reject(error);
              }
            );
          }
        });
      });
    
      return promise;
    }
    
    

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.