웹개발왕

[QR.G] JAVA zxing을 이용해서 WIFI 연결하는 QR코드 만들기 본문

웹개발 프로젝트/QR코드 생성기

[QR.G] JAVA zxing을 이용해서 WIFI 연결하는 QR코드 만들기

D.Luffy 2024. 10. 13. 16:42
반응형

 

 

 

안녕하세요.

오늘은 JAVA로 WIFI를 연결 할 수 있는 QR코드를 만들어보겠습니다.

 

오픈 라이브러리인 zxing을 이용할건데요.

아직 zxing을 사용 안해보신분은 이전 포스팅 참고해주세요.

 

[QR.G] JAVA로 QR 코드 생성하는 웹페이지 만들기

안녕하세요. 오늘은 QR 코드 생성 웹페이지인 'QR.G'를 만들기 위한 첫단계인 사용자가 입력한 URL 주소로 QR 코드 생성하는 방법을 알아보겠습니다. JAVA로 QR 코드를 방법은 여러가지 있지만 저는 '

web-developer1.tistory.com

 

 

 

WIFI 정보 입력하는 화면 만들기

 

 

QR 코드를 생성하기전에 화면에서 WIFI 정보를 입력해야합니다.

input으로 정보를 입력하고 ajax로 정보를 넘기는 기능을 구현해보겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
	<div>
		WIFI Name(SSID) : <input id="wifiSSID" autocomplete="off"/>
		WIFI Password : <input id="wifiPassword" autocomplete="off"/>
		WIFI Type : <select id="wifiType">
									<option value="WEP">WEP</option>
									<option value="WPA">WPA/WPA2</option>
									<option value="NO">No Pass</option>
								</select>
	</div>
	<button onclick="javascript:goQRGenerate();">생성</button>
	<div id="qrResult"></div>
</body>

<script>
	function goQRGenerate() {
		const wifiSSID = $("#wifiSSID").val();
		const wifiPassword = $("#wifiPassword").val();
		const wifiType = $("#wifiType").val();
		
		$.ajax({
			type:"GET",
			url: "/qr/generate?wifiSSID=" + wifiSSID + "&wifiPassword=" + wifiPassword + "&wifiType=" + wifiType,
			success: function(data){
				
				if(data){
					const imgSrc = "data:image/png;base64," + data;
					const imgTag = "<img src=\"" + imgSrc + "\" alt=\"QR Code\">";
					$("#qrResult").html(imgTag);
				}
				
			}
				
		});
	}
</script>
</html>

 

 

위 소스로 화면을 만들면 아래와 같은 화면이 출력됩니다.

Password는 알겠는데 SSID와 Type은 많은 분들이 모르실텐데요.

핫스팟으로 WIFI를 생성해서 예시를 보여드리겠습니다.

 

해당 화면은 갤럭시 모바일 핫스팟 설정 화면인데요.

 

네트워크 이름이 SSID

비밀번호가 Password

보안이 Type

입니다,

 

와피아이 생성 후 위 정보를 화면에 맞게 입력하시면됩니다. 

 

 

 

JAVA로 QR코드 생성하기

 

 

WIFI 정보를 넘기는 화면을 구현하셨다면 QR코드를 생성하는 Controller를 작성해야합니다.

 

지난 포스팅과 소스는 거의 비슷한데요.

차이가 있다면 url로 QR 코드를 생성하는게 아니라 WIFI 생성 링크로 QR 코드를 생성하는건데요.

소스는 아래와 같습니다.

@GetMapping(value = "/qr/generate")
	public  @ResponseBody String generate(String wifiSSID, String wifiPassword, String wifiType) throws WriterException {
		
		// QR 정보
        int width = 200;
        int height = 200;
        String fileType = "png";
        
        // WIFI 생성 링크 만들기
        String wifiInfo = "WIFI:T:" + wifiType + ";S:" + wifiSSID + ";P:" + wifiPassword + ";;";

        try {
            // QR 코드 생성에 사용할 설정 옵션
            Map<EncodeHintType, Object> hintMap = new HashMap<>();
            hintMap.put(EncodeHintType.MARGIN, 0);
            hintMap.put(EncodeHintType.CHARACTER_SET, "UTF-8");

            // QR 코드 매트릭스를 생성합니다.
            BitMatrix bitMatrix = new MultiFormatWriter().encode(
            		wifiInfo,
                    BarcodeFormat.QR_CODE,
                    width,
                    height,
                    hintMap
            );

         // BitMatrix를 BufferedImage로 변환
            BufferedImage bufferedImage = MatrixToImageWriter.toBufferedImage(bitMatrix);
//
//            // BufferedImage를 Base64로 인코딩
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            ImageIO.write(bufferedImage, fileType, outputStream);
            
            return Base64.getEncoder().encodeToString(outputStream.toByteArray());

        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return null;
	}

 

주석으로 WIFI 생성 링크 만들기 부분을 보시면 WIFI 정보와 WIFI 생성 링크를 조합해서 생성합니다.

 

 

 

테스트해보기

 

 

휴대폰 핫스팟으로 WIFI를 생성한 뒤 테스트 해보겠습니다.

화면에 정보를 입력하고 생성 버튼을 누르면

.

.

이렇게 QR 코드가 생성되는데요.

 

이 QR 코드를 스캔하면

.

.

 

 

이렇게 자동으로 와이파이가 연결됩니다.

 

앞으로 더 유용한 내용으로 포스팅하겠습니다.

읽어주셔서 감사합니다!

 

 

 

참고하면 도움되는 포스팅 ▼

 

[Spring Boot] Spring Starter 프로젝트 & 웹페이지 만들기

오늘은 저번에 설치한 STS4를 이용해 웹화면을 띄우기 위한 Spring Starter 프로젝트 생성하는 방법을 알아보겠습니다.아직 STS4를 설치 못하셨다면 저번 포스팅을 참고해서 설치해주세요. ▼ [Spring]

web-developer1.tistory.com

 

 

[Spring Boot] JAVA로 만든 Controller로 JSP 호출하기

안녕하세요. 오늘은 JAVA를 이용해 JSP를 호출할 수 있는 Controller 만드는 방법을 알아보겠습니다. 전에 포스팅한 JSP 파일 생성 & JSP 기본 경로 지정하기와 이어지는 내용이니 안 읽으신분은 꼭 읽

web-developer1.tistory.com

 

반응형

'웹개발 프로젝트 > QR코드 생성기' 카테고리의 다른 글

[QR.G] JAVA zxing을 이용해서 QR 코드 색상바꾸기  (1) 2024.09.10
[QR.G] JAVA로 QR 코드 생성하는 웹페이지 만들기  (0) 2024.08.18
'웹개발 프로젝트/QR코드 생성기' Related Articles more