►
Description
This community call demo is taken from the SharePoint General Development Special Interest Group recording on 21st of February 2019. In this video, Paolo Pialorsi (Piasys.com) demonstrates how to build Electron application which is connecting to SharePoint Online and Microsoft Graph APIs using Azure Active Directory.
Presenter - Paolo Pialorsi (Piasys.com) - @paolopia
More details on the SharePoint dev community calls from http://aka.ms/sppnp.
A
So,
let's
talk
a
little
bit
about
how
to
create
a
limiter
of
Jes
up
which
can
access
a
SharePoint
Online.
First
of
all,
let
me
set
a
little
bit
the
context.
So
when
we
talk
about
electrons
yes,
what
do
we
mean?
What
is
electrons?
Yes,
but
electrons.
Yes,
is
an
open
source
library
developed
by
github.
So
actually
now
we
can
say
developed
by
Microsoft,
just
a
side
note
and
it's
built
on
top
of
chromium
and
OJ.
A
Yes,
and
you
can
use
it
to
create
HTML
and
JavaScript
based
applications
which
can
be
executed
on
desktop
platforms
like
Mac,
OS,
Windows
and
Linux.
So
it
is
really
powerful
and
useful
whenever
you
need
to
create
a
cross-platform
desktop
solutions
and
whenever
you
want
to
reuse
your
knowledge
as
long
as
you
know
how
to
create
HTML
and
JavaScript
application.
Moreover,
it's
pretty
easy
to
use
electrons
a
yes
to
release
applications
that
can
be
easily
deployed
on
the
target
environment
of
the
end
users
as
well
as
easily
updated.
A
Whenever
you
have
an
updated
version
of
your
desktop
that
you
want
to
really
isn't
from
a
tool
chain
perspective,
developing
electrons
AS
applications
can
be
done.
That
is
just
one
set
of
options,
but
can
be
done
using
Visual
Studio
code
and
type
script
language,
as
well
as
using
a
reactor
or
angular,
or
the
framework
of
your
choice.
A
A
As
the
repository
for
my
data
and
having
the
capability
to
create
a
desktop
solution
which
can
be
multi-platform
cross-platform
and
can
easily
consume
data
in
SharePoint,
Online
I
think
it's
a
very
good
opportunity
and
it's
a
real
challenge
for
building
a
real
business
level
solutions.
Moreover,
as
I
said,
if
you
are
a
SharePoint
framework
developer
and
most
likely,
you
are
because
you
are
attending
this
call
as
a
sharp
instrument
developer,
you
will
be
able
to
reuse
most
of
the
knowledge
that
you
have
and
that
you
put
in
place
when
you
create
your
thermal
solution.
A
That's
why
I
will
start
from
the
customer
requirement.
The
customer
wanted
and
wants
to
have
a
solution
which
is
a
kind
of
an
application
launcher,
a
desktop
application,
launcher
cross-platform,
of
course,
and
they
want
to
use
this
application
to
start
all
of
these
tools,
all
of
the
apps
that
they
use
on
their
desktop
environment.
But
they
want
to
have
a
unique
repository
for
the
whole
list
of
apps
that
they
want
to
launch
through
the
app
launcher.
A
Moreover,
using
SharePoint,
Online
and
agility,
we
can
make
it
possible
for
the
end
users
to
have
a
smooth
experience,
because
they
will
leverage
the
single
sign-on
that
they
have
through
a
DFS
and
through
the
Federation
that
they
have
in
place.
Moreover,
we
decided
to
use
electrons.
Oh
yes,
of
course,
and
we
are
using
electrons
yes,
because
through
electron
we
have
a
cross-platform
support
and
we
decided
to
use
react
to
build
a
UI
component
that
we
use
to
render
the
app
launcher
and
again.
A
Last
but
not
least,
we
are
using
the
open
authorization,
2.0
endpoints
of
Asia
rack
directly
to
to
create
the
authorization
and
authentication
flow
within
the
electrons
AS
application.
So
let's
say
now
that
you
have
the
context
and
actually
I,
don't
know
how
many
of
you
already
know
and
use
the
electron
Jes
most
likely.
You
know,
but
not
necessarily
you
use
it.
A
A
If
you
wanna
dig
into
it-
and
this
is
the
SharePoint
Online
side,
the
customer
is
based
in
Italy
as
like
as
I
am
so
sorry
for
the
UI
in
Italian
language,
but
most
likely
you
can,
you
can
get
what
is
the
meaning
of
all
the
items
you
see,
and
here
we
have
a
list
of
items
that
we
wanna
launch
using
the
app
launcher.
We
have
a
title.
We
have
a
description,
an
icon
and
stuff
like
that.
So
on
the
other
side,
we
have
a
Visual
Studio
code
project
for
our
electron
jes
solution.
A
Let
me
first
of
all
start
the
producer
that
you
will
be
able
to
see
the
UI
of
the
application
first
and
then
the
code
under
cover.
So
let
me
start
it
and,
as
you
can
see,
I
have
design
in
UI
I'm,
not
a
user
with
a
federated
account
because
I'm
outside
of
their
domain,
so
I
have
to
do
an
explicit
authentication,
but
still
I
can
authenticate
using
Azure
Active
Directory
I
will
use
my
credentials
in
the
customer
tenant.
They
have
a
DFS,
as
you
can
see
so.
A
I
have
to
provide
my
credentials
to
their
adfs
authentication
from
10
and
I
have
to
wait
for
the
two
factor-
authentication
code,
which
hopefully
will
come
in
a
matter
of
few
seconds.
Okay
got
it
so
four,
two,
four
six,
four
two
again.
Luckily
it
is
a
one
time
password
so
now
I
mean
I
will
not
save
my
user
access
token,
because
I
want
to
use
different
credentials
needed
and,
as
you
can
see,
this
application
now
provide
with
a
UI
which
can
which
you
can
like
or
not
it's
up
to
you.
A
But
if
not
the
real
topic
of
this
demo
here
we
can
see
a
bunch
of
groups
of
icons
actually
in
my
account,
I
have
all
of
them,
but
a
real
user
will
just
see
a
small
amount
of
icons
and
they
can
start
the
application
by
clicking
on
them
and
launching
the
apps
that
are
running
under
the
cover
of
every
single
icon
that
we
have
in
the
app
launcher.
But
I
don't
really
care
about
the
application
by
itself
and
I
want
to
move
to
this
source
code.
A
Just
for
the
sake
of
completeness
here
we
have
the
developer
toolbar,
because
I
am
in
the
developer
context,
and
you
can
see
you
can
appreciate
the
fact
that,
under
the
cover
there
is
there
lht
ml
application,
which
is
running
inside
the
chromium
platform
in
the
elect
from
GES
solution.
So
let
me
close
this
application,
and
this
is
the
source
code
of
the
electrons.
A
A
Communication
of
electrons,
yes
to
make
an
interactive
actor
in
log
in
this
ad
logging
request,
will
go
to
inter
process
main
event
handler
called
a
log
in
as
like
as
the
one
we
were
using
in
the
react
component,
and
here
we
simply
use
the
implicit
flow
of
open
authorization
inside
this
application
to
make
the
authentication
flow
in
the
application.
So
we
use
no
gimmicks
online.com.
We
use
the
open
authorization
and
point
we
connect
to
the
authorized
in
point.
A
We
provide
a
bunch
of
settings
for
the
application,
including
the
client
ID,
including
the
resource
that
we
want
to
access
which
is
SharePoint
Online,
and
you
can
clearly
see
it
in
the
settings
of
the
application
in
the
collection
of
resources.
We
have
the
micrograph,
as
well
as
the
sharepoint
online
resource
that
we
want
to
consume.
Once
we
have
the
URL
for
an
implicit
flow
request,
we
simply
create
a
browser
window
within
the
context
of
electron.
A
A
In
order
to
be
able
to
do
that,
of
course,
we
had
to
register
the
application
in
the
direct
directory
and
in
fact
we
have
that
Lounger
application
registered
in
the
EAD
tenant
of
our
customer
and
in
a
manifest
file
of
this
ad
application.
We
enable
the
implicit
flow,
as
you
can
see
here,
off,
to
allow
implicit
flow
equal
true
as
well
as,
of
course
in
order
to
be
able
to
access
sharepoint
online
in
the
required
permissions.
A
We
had
to
declare
that
we
want
it
to
access,
at
least
in
read-only
mode,
the
content
of
the
site
collections
with
a
delegated
permission
request.
So
pretty
straightforward.
You
create
an
electron
genius
application.
You
leverage
at
the
low
level,
I
would
say
the
OAuth
implicit
implicit
flow
as
well
as
the
rest.
Api
is
of
SharePoint
Online,
providing
the
access
token
and
that's
it
you
can
interact.
You
can
communicate
with
SharePoint
Online
from
a
desktop
application
built
with
electron
Gia's,
and
that's
it
on
my
side
as
well.
B
Paolo,
so
looking
at
the
shadow
in
the
poll
there's
one
question
from
Russell
and
it's
Aussie
like
when
you
saw
the
screen
with
all
the
tiles
we
can
launch
applications.
The
applications
that
you
launch
are
they're
all
web
applications
or
can
the
tool
also
launch
an
application
which
is
locally
a
solo
machine.